title: Designing React Hooks prevent react-hooks/exhaustive-deps warning
body: <p>I am designing a hook to fetch data only when the hooks dependencies change. <strong>It works as expected</strong> but I receive the linter warnings:</p>
  
  <pre><code>React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.
  </code></pre>
  
  <p>and </p>
  
  <pre><code>React Hook useEffect has missing dependencies: 'data', 'errorHandler', 'route', and 'successHandler'. Either include them or remove the dependency array. If 'successHandler' changes too often, find the parent component that defines it and wrap that definition in useCallback. 
  </code></pre>
  
  <p>As far as I am aware I do not want all these vars in my dependencies as I don't want to fire this hook when these change, I only want to fire it when the dependencies I pass change. </p>
  
  <p><strong>Question:</strong>
  How can I design <code>useFetch()</code> hook in a way that coincides with the hooks linter standards (if my design pattern is not up to par, please elaborate on how best this should be accomplished).</p>
  
  <p>My <code>useFetch()</code> hook</p>
  
  <pre><code>function useFetch(
      {
          route,
          data = {},
          successHandler,
          errorHandler,
      },
      dependencies = []) {
      const [loading, setLoading] = useState(true);
      useEffect(() =&gt; {
          setLoading(true);
          postJson({route}, data)
              .then(
                  res =&gt; {
                      if(isFunction(successHandler)) successHandler(res);
                  },
                  ({responseJSON: err}) =&gt; {
                      if(isFunction(errorHandler)) {
                          errorHandler(err);
                      } else {
                          notify({text: err.message || messages.saveFailed(), cssClass: 'error'});
                      }
                  }
              )
              .finally(() =&gt; {
                  setLoading(false);
              });
      }, dependencies);
      return loading;
  }
  </code></pre>
  
  <p>Component using <code>useFetch()</code></p>
  
  <pre><code>function MyComponent({data, selectedReviewId, setField}) {
      const loading = useFetch({
          route: 'foo.fetchData',
          data: {crrType, clientId, programId, userId},
          successHandler: d =&gt; setField([], d) // setField() will set data with the value fetched in useFetch() 
      }, [selectedReviewId]);
  
      return loading ? &lt;SpinnerComponent/&gt; : &lt;div&gt;{data.foo}&lt;/div&gt;;
  }
  </code></pre>