title: How to avoid "React Hook useEffect has a missing dependency" and infinite loops
body: <p>I have written a react-js component like this:</p>
  <pre><code>import Auth from &quot;third-party-auth-handler&quot;;
  import { AuthContext } from &quot;../providers/AuthProvider&quot;;
  
  export default function MyComponent() {
    const { setAuth } = useContext(AuthContext);
  
    useEffect(() =&gt; {
      Auth.isCurrentUserAuthenticated()
        .then(user =&gt; {
          setAuth({isAuthenticated: true, user});
      })
      .catch(err =&gt; console.error(err));
    }, []);
  };
  </code></pre>
  <p>With the following AuthProvider component:</p>
  <pre><code>import React, { useState, createContext } from &quot;react&quot;;
  
  const initialState = { isAuthenticated: false, user: null };
  const AuthContext = createContext(initialState);
  
  const AuthProvider = (props) =&gt; {
    const [auth, setAuth] = useState(initialState);
  
    return (
      &lt;AuthContext.Provider value={{ auth, setAuth }}&gt;
        {props.children}
      &lt;/AuthContext.Provider&gt;
    )
  };
  
  export { AuthProvider, AuthContext };
  </code></pre>
  <p>Everything works just fine, but I get this warning in the developer's console:</p>
  <blockquote>
  <p>React Hook useEffect has a missing dependency: 'setAuth'. Either include it or remove the dependency array  react-hooks/exhaustive-deps</p>
  </blockquote>
  <p>If I add <code>setAuth</code> as a dependency of <code>useEffect</code>, the warning vanishes, but I get <code>useEffect()</code> to be run in an infinite loop, and the app breaks out.<br />
  I understand this is probably due to the fact that <code>setAuth</code> is reinstantiated every time the component is mounted.<br />
  I also suppose I should probably use <code>useCallback()</code> to avoid the function to be reinstantiated every time, but I really cannot understand how to use <code>useCallback</code> with a function from <code>useContext()</code></p>