title: React Hooks Dependencies - Infinite Loop
body: <p>I have the following code:</p>
  
  <pre><code>import React from "react";
  
  export const useFetch = (promise, args = [], options = {}) =&gt; {
    const [state, setState] = React.useState({
      loading: false,
      data: null,
      error: null
    });
  
    if (!args) args = [];
  
    const fetch = React.useCallback((...args) =&gt; {
      setState({
        ...state,
        loading: true,
        error: null
      });
  
      return promise(...args)
        .then(response =&gt; {
          setState({
            ...state,
            loading: false,
            data: response
          });
          return response;
        })
        .catch(error =&gt; {
          setState({
            ...state,
            loading: false,
            error
          });
        });
    }, [promise, state]);
  
    React.useEffect(() =&gt; {
      if (options.now) {
        fetch(...args);
      }
    }, [args, fetch, options.now]);
  
    return {
      fetch,
      ...state
    };
  };
  </code></pre>
  
  <p>But <strong>I'm getting an infinite console.log loop</strong> when I try to use like this:</p>
  
  <pre><code>const allUsers = () =&gt; Promise.resolve([{ name: 'Bruno' }])
  
  function App() {
    const { data } = useFetch(allUsers, [], { now: true })
    console.log('-&gt;', data)
    return (
      &lt;span&gt;Testing hook&lt;/span&gt;
    )
  }
  </code></pre>
  
  <p>All the deps and the useCallback was suggestions from the lint react-hooks/exhaustive-deps. So, what I'm doing wrong?</p>
  
  <p>Thanks for your help.</p>