title: React useEffect dependencies invalidation
body: <p>I am currently working on a react project and I ran into the need of manually triggering an useEffect. For that, I am using an extra dependency, a &quot;valid&quot; flag, which if true will also trigger a fetch. The thing is, the fetch also has parameters that it depends on, so now my effect depends on [page, limit, title, valid]. The problem with this is that I cannot simply let it this way, because then I wouldn't know when I should refetch. What would be a good solution to allow refetch on parameter changes but also when manually changing the &quot;valid&quot; param? For now, I am doing the following:</p>
  <pre class="lang-js prettyprint-override"><code>export function useJobOpenings(page: number, limit: number, title: string): UseJobOpeningsResponse {
      const [jobOpenings, setJobOpenings] = useState&lt;JobOpeningDTO[]&gt;([]);
      const [fetching, setFetching] = useState(false);
      const [error, setError] = useState&lt;unknown&gt;();
      const [valid, setValid] = useState(false);
  
      useEffect(() =&gt; {
          setValid(false);
      }, [limit, page, title]);
  
      // eslint-disable-next-line react-hooks/exhaustive-deps
      useEffect(fetchJobOpenings, [valid]);
  
      return { jobOpenings, fetching, error, invalidate: (): void =&gt; setValid(false) };
  
      function fetchJobOpenings(): (() =&gt; void) | void {
          if (valid) return;
          let mounted = true;
  
          asyncFetch();
  
          return (): void =&gt; {
              mounted = false;
          };
  
          async function asyncFetch(): Promise&lt;void&gt; {
              setFetching(true);
              try {
                  const _jobOpenings = await getAllJobOpenings({ title, page, limit });
                  if (!mounted) return;
  
                  setJobOpenings(_jobOpenings.data);
                  setFetching(false);
                  setValid(true);
              } catch (err) {
                  if (!mounted) return;
                  setError(err);
                  setFetching(false);
                  setValid(true);
              }
          }
      }
  }
  </code></pre>
  <p>The problem with this is that it seems really counterintuitive to update the &quot;valid&quot; flag based on the other dependencies and then use only that flag in the effect that actually does the fetching, since it also triggers the exhaustive deps elsint rule, even though it seems pretty obvious, hopefully it is correct as well, that the valid flag already depends on the 3 other parameters.</p>