title: How to correctly implement a props callback function in the useEffect hook
body: <p>I want to use <code>useEffect()</code> to detect changes to a state value and pass that value to a parent component using a callback function received as a prop. I can't figure out a way to do this without disabling the eslint missing dependency warning. I have this problem on both the child component and that child's child.</p>
  <p>Here is the parent implementation:</p>
  <pre><code>const updateValues = (newValues) =&gt; {
    setValues({ ...values, ...newValues });
  };
  
  &lt;GeneralUpdates onUpdate={updateValues} /&gt;
  </code></pre>
  <p>Here is the first child (GeneralUpdates):</p>
  <pre><code>const [values, setValues] = useState({
      name: '',
      description: '',
    });
  
  // This handles form input changes
  const handleChange = (prop) =&gt; (event) =&gt; {
    setValues({ ...values, [prop]: event.target.value });
  };
  
  useEffect(() =&gt; {
    onUpdate(values);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [values]);
  
  &lt;FilesUpload handleChange={onUpdate}/&gt;
  
  </code></pre>
  <p>And this is the child's child (FilesUpload):</p>
  <pre><code>const [featuredPhotos, setFeaturedPhotos] = useState([]);
  
  useEffect(() =&gt; {
    handleChange({ featuredPhotos });
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [featuredPhotos]);
  </code></pre>
  <p>Adding <code>handleChange</code> as a dependency results in an infinite re-rendering loop. I've tried every solution I can find but must be missing something here.</p>