title: react useEffect hook infinite loop caused by axios cancel token [react-hooks/exhaustive-deps]
body: <p>In my react component I am using <code>useEffect</code> to fetch data on the mount of component and each time that filters change. Everything works as it should but <code>react-hooks/exhaustive-deps</code> throws warning that the fetcher function should be in the array of dependencies. By adding fetcher to dependencies list the app gets into an infinite loop. The fetcher receives a new Axios cancel token on each run which causes an infinite loop of calls to fetcher.
  How should I handle this situation, without disabling the rule?</p>
  
  <p><em>he fetcher function is outside of the <code>useEffect</code>, cause another callback functions (passed to children) might call the fetcher. e.g. a modal that can edit user and on successful editing calls fetcher to reload new users</em></p>
  
  <pre><code>const [isLoading, setIsLoading] = React.useState&lt;boolean&gt;(false);
  const [users, setUsers] = React.useState&lt;IUser[]&gt;([]);
  const [filters, setFilters] = React.useState&lt;ITableFilters&gt;({...initFilters});
  
  const fetcher = async (s: CancelTokenSource): Promise&lt;void&gt; =&gt; {
      setIsLoading(true);
      const params = { ...filters };
      try {
        const { data} = await fetchAllUsers({
          params,
          cancelToken: s.token
        });
        setUsers(data.users);
        setIsLoading(false);
      } catch (error) {
        handleResponseError(error);// wchich checks axios.isCancel
        setIsLoading(false);
      }
  }
  
    React.useEffect(() =&gt; {
      const source = axios.CancelToken.source();
      // tslint:disable-next-line: no-floating-promises
      fetcher(source);
      return function cleanup() {
        source.cancel();
      };
    }, [filters]);
  </code></pre>