title: How to run a function only once in react
body: <p>I'm working on a simple quiz application. I have a local array with questions that is in randomised order each time. The function that is shuffling the array in different order is triggered each time the handleAnswerOptionClick is run.</p>
  <p>How can I run the arrayShuffle function once?</p>
  <p>My guess is that I could use useEffect for this but I haven't gotten it to work. It complains about that it doesn't have different dependencies.</p>
  <pre><code> useEffect(() =&gt; {
      arrayShuffle(questions);
    }, []);
  </code></pre>
  <p>Code: <a href="https://codesandbox.io/s/fast-bush-iqfvj?file=/src/components/QuizContainer.js" rel="nofollow noreferrer">CodeSandox</a></p>
  <p>QuizContainer:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  
  export const QuizContainer = () =&gt; {
    const questions = [
      {
        questionText: &quot;What is the capital of France?&quot;,
        answerOptions: [
          { option: &quot;New York&quot;, isCorrect: false },
          { option: &quot;London&quot;, isCorrect: false },
          { option: &quot;Paris&quot;, isCorrect: true },
          { option: &quot;Dublin&quot;, isCorrect: false }
        ]
      },
      {
        questionText: &quot;Who is CEO of Tesla?&quot;,
        answerOptions: [
          { option: &quot;Jeff Bezos&quot;, isCorrect: false },
          { option: &quot;Elon Musk&quot;, isCorrect: true },
          { option: &quot;Bill Gates&quot;, isCorrect: false },
          { option: &quot;Tony Stark&quot;, isCorrect: false }
        ]
      },
      {
        questionText: &quot;The iPhone was created by which company?&quot;,
        answerOptions: [
          { option: &quot;Apple&quot;, isCorrect: true },
          { option: &quot;Intel&quot;, isCorrect: false },
          { option: &quot;Amazon&quot;, isCorrect: false },
          { option: &quot;Microsoft&quot;, isCorrect: false }
        ]
      },
      {
        questionText: &quot;How many Harry Potter books are there?&quot;,
        answerOptions: [
          { option: &quot;1&quot;, isCorrect: false },
          { option: &quot;4&quot;, isCorrect: false },
          { option: &quot;6&quot;, isCorrect: false },
          { option: &quot;7&quot;, isCorrect: true }
        ]
      }
    ];
  
    const [currentQuestion, setCurrentQuestion] = useState(0);
    const [showScore, setShowScore] = useState(false);
    const [score, setScore] = useState(0);
  
    // Event handlers
    const handleAnswerOptionClick = (isCorrect) =&gt; {
      if (isCorrect) {
        setScore(score + 1);
      }
  
      const nextQuestion = currentQuestion + 1;
      nextQuestion &lt; questions.length
        ? setCurrentQuestion(nextQuestion)
        : setShowScore(true);
    };
  
    // ShuffleArray
    const arrayShuffle = function (arr) {
      let newPos, temp;
      for (let i = arr.length - 1; i &gt; 0; i--) {
        newPos = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[newPos];
        arr[newPos] = temp;
      }
      return arr;
    };
  
    const newArray = arrayShuffle(questions);
    console.log(newArray);
  
    return (
      &lt;&gt;
        &lt;h1&gt;QuizContainer&lt;/h1&gt;
        {showScore ? (
          &lt;p&gt;
            You scored {score} out of {questions.length}
          &lt;/p&gt;
        ) : (
          &lt;&gt;
            &lt;p&gt;
              Question {currentQuestion + 1}/{questions.length}
            &lt;/p&gt;
  
            &lt;p&gt;{questions[currentQuestion].questionText}&lt;/p&gt;
  
            &lt;div&gt;
              {questions[currentQuestion].answerOptions.map(
                (answerOption, index) =&gt; (
                  &lt;div key={index}&gt;
                    &lt;button
                      onClick={() =&gt;
                        handleAnswerOptionClick(answerOption.isCorrect)
                      }
                    &gt;
                      {answerOption.option}
                    &lt;/button&gt;
                  &lt;/div&gt;
                )
              )}
            &lt;/div&gt;
          &lt;/&gt;
        )}
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>Just ask if I need to clarify and if you guys think that I'm approaching this the right way.</p>
  <p>Thanks beforehand,</p>
  <p>Erik</p>