title: UseEffect conflict in React + Typescript
body: <p>I am developing the game app with React + Typescript. When i refactored the App component from ClassComponent to FC, i had to use UseEffect Hook for implementing the ComponentDidMount method here. Then i had to call the function compareNumbers() when the one of the fields of state changes. Here is the problem. when i use useEffect only for mounting, the number I entered doesn't changes even when I write the state chengin in the callback. When I use UseEffect for calling comparing function, but leave the mounting, i don`t get number generation. But when I use both of them, nothin works, no number generation and no setting the number from input.
  And when i restart the gae by startNewGame(), number generates correctly and sets the state...</p>
  <p>full code here: <a href="https://github.com/mykola-kolomoyets/cow-bull-react-ts" rel="nofollow noreferrer">https://github.com/mykola-kolomoyets/cow-bull-react-ts</a></p>
  <p>Here is fragment of code:</p>
  <pre><code>interface IAppState {
  
  
  moves: number
    currentNumber: number
    enteredNumber: number
    gameData: {
      cows: number
      bulls: number
    }
    incorrectNumbers: number[]
    warnings: string[]
  };
  
  const App: FC = () =&gt; {
    const [data, setData] = useState&lt;IAppState&gt;(
      {
        moves: 0,
        currentNumber: 0,
        enteredNumber: 0,
        gameData: {
          cows: 0,
          bulls: 0
        },
        incorrectNumbers: [],
        warnings: []
      });
  
    // useEffect(() =&gt; {
    //   generateNumber();
    // }, []);
  
    // useEffect(() =&gt; {
    //   compareNumbers();
    // }, [data.enteredNumber])
  
    const handleCallBack = async (childData: number): Promise&lt;void&gt; =&gt; {
      console.log(&quot;translating the number to App&quot;);
      await setData({...data, enteredNumber: childData});
    }
  
    const generateNumber = (): void =&gt; {
      let digits: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      let arr: number[] = [];
  
      for (let i = 0; i &lt; 4; i++) {
        let index = Math.floor(Math.random() * digits.length);
        if (i === 0 &amp;&amp; index === 0) index++;
        arr.push(digits[index]);
        digits.splice(index, 1);
      }
  
      setData({
        ...data,
        currentNumber: +arr.join(''),
        incorrectNumbers: digits
      });
  
    }
  ...
    const startNewGame = (): void =&gt; {
      setData({
        moves: 0,
        currentNumber: 0,
        enteredNumber: 0,
        gameData: {
          cows: 0,
          bulls: 0
        },
        incorrectNumbers: [],
        warnings: []
      });
      generateNumber();
    }
    return (
      &lt;&gt;
        &lt;h1&gt;Cow-Bull game&lt;/h1&gt;
        &lt;h3&gt;React+Typescript version&lt;/h3&gt;
        &lt;Moves moves={data.moves} /&gt;
        &lt;NumInput parentCallBack={handleCallBack} /&gt;
        &lt;button onClick={startNewGame}&gt;restart game&lt;/button&gt;
        &lt;WarningsContainer warnings={data.warnings} /&gt;
        &lt;CowBulls cows={data.gameData.cows} bulls={data.gameData.bulls} /&gt;
      &lt;/&gt;
    )
  }
  </code></pre>