title: How to handle dependencies array for custom hooks in react
body: <p>I'm creating a custom hook and would like to define an optional param so that I can pass in extra dependencies when needed. My code looks like the following snippet:</p>
  
  <pre><code>import { useEffect } from 'react';
  
  function useCustomHook(param1, extraDeps) {
    useEffect(() =&gt; {
      // do something with param1 here
    }, [param1, ...extraDeps])
  }
  </code></pre>
  
  <p>The react-hooks/exhaustive-deps throws a warning saying </p>
  
  <blockquote>
    <p>React Hook useEffect has a spread element in its dependency array. This means we can't statically verify whether you've passed the correct dependencies</p>
  </blockquote>
  
  <p>Anyone have an idea about how to address that warning? Or it's not a good practice to pass deps array to custom hook?</p>
  
  <p>For those who are interested in why extraDeps is needed. here's an example:</p>
  
  <pre><code>const NewComponent = (props) =&gt; {
    [field1, setField1] = useState()
    [field2, setField2] = useState()
  
    // I only want this to be called when field1 change
    useCustomHook('.css-selector', [field1]);
  
    return &lt;div&gt;{field1}{field2}&lt;/div&gt;;
  }
  </code></pre>