title: React Hooks and Conditions
body: <p>The "<a href="https://reactjs.org/docs/hooks-rules.html" rel="nofollow noreferrer">Rules of Hooks</a>" mention:</p>
  
  <blockquote>
    <p>Don’t call Hooks inside loops, conditions, or nested functions.</p>
  </blockquote>
  
  <p>Does that also mean we should avoid code like this? </p>
  
  <pre><code>const useMyCoolHook = ({configKey, anotherProp}) =&gt; {
    useEffect(() =&gt; {
      // Do something with configKey here
    }, [configKey])
  
    useEffect(() =&gt; {
      // Do something with configKey and anotherProp here
    }, [configKey, anotherProp])
  }
  
  const Component = ({configKey, anotherProp}) =&gt; {
    if(configKey === undefined) { return null; }
  
    useMyCoolHook({configKey, anotherProp})
  
    return (
      &lt;h1&gt;Hello world&lt;/h1&gt;
    )
  }
  </code></pre>
  
  <p>If so, is there a way to avoid having to include the condition inside each of the <code>useEffect</code> hooks?</p>