title: React: conditional dependency on useEffect? Or how to prevent redundancy?
body: <p>If I have a <code>React hook</code> that does not need always to be linked with the <code>auth</code> state (as a <code>useEffect</code> dependency, how can I <strong>conditionally</strong> remove this dependency, or any other way to prevent <strong>redundancy</strong> and thus avoid creating a second almost identical hook?</p>
  
  <pre class="lang-js prettyprint-override"><code>export const useHookAuth = () =&gt; {
  
    // useless code
  
    useEffect(() =&gt; {
      if (!auth.user) return
  
      // even uselesser code
    }, [auth.user])
  
    return ['with auth dependency']
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>export const useHookWithoutAuth = () =&gt; {
  
    // the same useless code
  
    useEffect(() =&gt; {
      // identical even uselesser code
    }, [])
  
    return ['without auth dependency']
  }
  </code></pre>
  
  <p>EDIT: more in detail, in this example the hook <code>useExample</code> takes care of "this" auth, but this is redundant since it is already done before by the component <code>Content</code></p>
  
  <p>However, this hook is used elsewhere where it does have to take into account this auth</p>
  
  <p>The question is how to avoid duplicating the hook if I only want not to have the hook linked to auth?</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect, useState, createContext, useContext } from "react";
  import "./styles.css";
  
  const AuthContext = createContext(null);
  const useAuth = () =&gt; useContext(AuthContext);
  const useAuthProvider = () =&gt; {
    const [access, setAccess] = useState(0);
    return { access, setAccess };
  };
  
  const useExample = () =&gt; {
    const auth = useAuth();
    const [content, setContent] = useState("");
  
    useEffect(() =&gt; {
      if (auth &amp;&amp; !auth.access) return;
      setContent("fetched content");
  
      // even uselesser code
    }, [auth]);
  
    return [content];
  };
  
  const Button = () =&gt; {
    const auth = useAuth();
    return (
      &lt;button
        onClick={() =&gt; {
          auth.setAccess(1);
        }}
      &gt;
        clickme
      &lt;/button&gt;
    );
  };
  
  const Content = () =&gt; {
    const auth = useAuth();
    const [content] = useExample();
    return &lt;h2&gt;{(auth &amp;&amp; auth.access &amp;&amp; content) || "restricted"}&lt;/h2&gt;;
  };
  
  export default function App() {
    const authProvider = useAuthProvider();
  
    return (
      &lt;AuthContext.Provider value={authProvider}&gt;
        &lt;div className="App"&gt;
          &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
          &lt;Button /&gt;
          &lt;Content /&gt;
        &lt;/div&gt;
      &lt;/AuthContext.Provider&gt;
    );
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/tender-pike-ng4wg?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/tender-pike-ng4wg?file=/src/App.js</a></p>