title: Calling function in child passed from parent in useEffect() hook, React
body: <p>I have defined a function in my parent component that updates local state and passed it to the child component. In the child component I want to call the function in useEffect hook every time the magLockDropdown dependency value changes. When trying to do this I get a lint warning shown below. Would it be a good idea to disable the linter for this example? I understand every time the parent re renders it re creates the function that is being passed down but not sure if this is causing the warning. Any help appreciated. Thanks!</p>
  
  <p>Function in parent component. </p>
  
  <pre><code>const updateWeeklyTestState = (name, value) =&gt; {
  setWeeklyTest({
    ...weeklyTest, [name]: value
  })}
  </code></pre>
  
  <p>UseState hook in child component.</p>
  
  <pre><code>  useEffect(() =&gt; {
    updateWeeklyTestState (failList, maglockDropdown)
    }, [maglockDropdown])
  </code></pre>
  
  <p>esLint Warning:</p>
  
  <blockquote>
    <p>React Hook useEffect has a missing dependency: 'updateWeeklyTestState '. Either include it or remove the dependency array  react-hooks/exhaustive-deps</p>
  </blockquote>
  
  <p><strong>EDIT</strong></p>
  
  <p>Child Declaration</p>
  
  <pre><code>export default function Maglocks (props) {
  const [maglockDropdown, setMaglockDropdown] = useState(['Pass'])
  const { maglocks, weeklyTestState, updateWeeklyTestState, addFailedMaglocksToArray } = props
  </code></pre>