title: useFocusEffect runs every time useState updates
body: <p>I've been trying to use <code>useState</code> inside <code>useFocusEffect</code>. Following react-navigation I got something like this:</p>
  <pre><code>  const [counter, setCounter] = useState(0);
  
    useFocusEffect(
      useCallback(() =&gt; {
        console.log(counter);
      }, [counter]),
    );
  </code></pre>
  <p>Now the problem is that every time <code>counter</code> updates, <code>useFocusEffect</code> fires. What I want is for it to fire only when screen comes into focus. Now I've also tried doing this with navigation focus listener:</p>
  <pre><code>  useEffect(() =&gt; {
      const onFocus = navigation.addListener('focus', () =&gt; {
        console.log(counter);
      });
  
      return onFocus;
    }, [navigation, counter]);
  </code></pre>
  <p>It works, well partially. While the <code>onFocus</code> function is performed only when screen comes into focus, <code>useEffect</code> fires every time counter updates. Same thing happens when using redux-toolkit slices. How can I prevent this behaviour?</p>
  <hr />
  <h2>Update</h2>
  <p>I should add that removing <code>counter</code> from dependency array prevents it from updating in subsequential runs. So I will rephrase the question. Is there a way to either fix <code>useCallback</code> by preventing it from firing every time <code>counter</code> updates or fix <code>useEffect</code> so that it fires only on focus with <code>counter</code> updated?</p>