title: Run useEffect only if certain values are true, but don't re-run unless the dependencies change
body: <p>I found similar questions where people wanted to run <code>useEffect</code> only if certain values are true, but the solutions are always along the lines of:</p>
  <pre><code>useEffect(() =&gt; {
    if (!isTrue) {
      return;
    }
    someFunction(dep);
  }, [dep, isTrue]);
  </code></pre>
  <p>The issue with this is if <code>isTrue</code> goes from true to false to true, it re-runs <code>someFunction</code>, even if <code>dep</code> didn't change. I want to re-run <code>someFunction</code> only if <code>dep</code> changes.</p>
  <p>The only way I can think of to do this is a hack using refs, e.g:</p>
  <pre><code>function useEffectIfReady(fn, deps = [], isReady = true) {
    const ref = useRef({
      forceRerunCount: 0,
      prevDeps: [],
    });
  
    if (isReady &amp;&amp; (ref.current.forceRerunCount === 0
      || deps.length !== ref.current.prevDeps.length
      || !deps.every((d, idx) =&gt; Object.is(d, ref.current.prevDeps[idx])))) {
      ref.current.forceRerunCount++;
      ref.current.prevDeps = deps;
    }
  
    useEffect(() =&gt; {
      if (ref.current.forceRerunCount === 0) {
        return;
      }
  
      return fn();
    }, [ref.current.forceRerunCount]);
  });
  </code></pre>
  <p>Is there a cleaner way? I don't like the idea of comparing dependencies myself, since React might change how they compare dependencies and AFAIK they don't export their comparison function.</p>