title: How to fix React.useEffect and useCallback circular loop when updating a state?
body: <p>I'm fetching some data from an API, but since I am using this data to update a state within a <code>useEffect</code>, this state becomes a required dependency, which causes a circular loop.</p>
  <p><code>state is updated -&gt; useEffect is called -&gt; state is updated ...</code></p>
  <p>I read a lot of answers and articles about that, but I couldn't find an answer to my specific question.</p>
  <p>This is my initial code:</p>
  <pre><code>let [state, setState] = React.useState&lt;IDataSource[]&gt;([])
  
  React.useEffect(() =&gt; {
      let dataSource: IDataSource[] = []
     
      dataFetched.forEach((item, index) =&gt; {
          // Some logic
      })
      
      setState(state.concat(dataSource))
  
  }, [dataFetched, state])
  </code></pre>
  <p>Then I decided to update the state using a function called by <code>useEffect</code> and passing an argument:</p>
  <pre><code>let [state, setState] = React.useState&lt;IDataSource[]&gt;([])
  
  const updateData = (arg: IDataSource[] =&gt; {
      setData(state.concat(arg))
  }
  
  React.useEffect(() =&gt; {
      let dataSource: IDataSource[] = []
     
      dataFetched.forEach((item, index) =&gt; {
          //Some logic
      })
      
      updateData(dataSource)
  }, [dataFetched, updateData])
  </code></pre>
  <p>This works, but since I have <code>updateData</code> as a <code>useEffect depency</code> I have to wrap the function with <code>useCallback</code>:</p>
  <pre><code>const updateData = React.useCallback((arg: IDataSource[]) =&gt; {
      setData(state.concat(arg))
  }, [state])
  
  React.useEffect(() =&gt; {
      let dataSource: IDataSource[] = []
     
      dataFetched.forEach((item, index) =&gt; {
          //Some logic
      })
      
      updateData(dataSource)
  }, [dataFetched, updateData])
  </code></pre>
  <p>But in this case I also have <code>state</code> as a <code>useCallback depency</code> and I'm back to the starting problem, a circular loop.</p>
  <p>Apparently I should use <code>React.useRef</code> when I have an array as <code>useEffect dependency</code>, but <code>state</code> is not just an array, it is actually a state, which is being set with <code>useState</code>, so I don't know how to do that in this case or even if this is possible.</p>
  <p>Is there a way to solve that?</p>