title: Is there a way to avoid infinite loop of dependencies and to pass the correct dependencies to useEffect hook in this case?
body: <p>I have a custom hook which gets a callback as one of the arguments and calls it in <code>useEffect</code></p>
  <pre><code>const customHook = (callback: Function) =&gt; {
    ...
    useEffect(() =&gt; {
      if (something) {
        callback();
      }
    }, [other things, callback]);
  
    return {values}
  }
  </code></pre>
  <p>The problem here is that <code>callback</code> is a function and causes <code>useEffect</code> to run in a loop. EsLint suggested <code>useCallback</code> in a parent component. So I decided to wrap this <code>callback</code> in a <code>useCallback</code> where I am calling my <code>customHook</code>.</p>
  <p>So I would have something like this in my component:</p>
  <pre><code>const memoizedCallback = useCallback(() =&gt; {
      myFunction(values);
    }, [values, myFunction]);
  
    const { values } = customHook(memoizedCallback);
  </code></pre>
  <p>And here I have my problem - dependencies of <code>myFunction</code> are returned from <code>customHook</code> and I can not use them before they defined. But I also can not put <code>memoizedCallback</code> after <code>customHook</code> call because of the same reasons.</p>
  <p>And now I am stuck in this infinite loop of dependencies and I am not sure how to solve this, if somehow, without just ignoring eslint warning.</p>
  <p>So any ideas and solutions will be much appreciated :)</p>