title: Using React, how do you pass a function from a parent component to a child component and run it in the useEffect hook?
body: <p>I'm using React to pass a function from a parent component to a child component and trying to run it in the <code>useEffect()</code> hook.</p>
  
  <p><strong>Parent</strong></p>
  
  <pre><code>function Parent(props) {
  
    function alertMe() {
      alert('me');
    }
  
    render (
      &lt;div&gt;
        &lt;Child alertMe={alertMe} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><strong>Child</strong></p>
  
  <pre><code>function Child(props) {
  
    const { alertMe } = props;
  
    useEffect(() =&gt; {
      alertMe();
    }, [alertMe]);
  
    render (
      &lt;div&gt;
        // stuff
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>If I remove <code>alertMe</code> as a dependency in the <code>useEffect()</code> of the Child component, it only fires once, but I get a warning:</p>
  
  <blockquote>
    <p>React Hook useEffect has missing dependencies: 'alertMe'. Either include it or remove the dependency array  react-hooks/exhaustive-deps</p>
  </blockquote>
  
  <p>The <code>alertMe</code> function is defined once in the Parent component on load, so I don't understand why it would run endlessly in the Child component. It's not changing like state.</p>
  
  <p>How can I add <code>alertMe</code> as a <code>useEffect()</code> dependency but still <em>only</em> run it once?</p>