Calling function in child passed from parent in useEffect() hook, React

1
votes

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!

Function in parent component. 

const updateWeeklyTestState = (name, value) => {
setWeeklyTest({
  ...weeklyTest, [name]: value
})}

UseState hook in child component.

  useEffect(() => {
  updateWeeklyTestState (failList, maglockDropdown)
  }, [maglockDropdown])

esLint Warning:

React Hook useEffect has a missing dependency: 'updateWeeklyTestState '. Either include it or remove the dependency array react-hooks/exhaustive-deps

EDIT

Child Declaration

export default function Maglocks (props) {
const [maglockDropdown, setMaglockDropdown] = useState(['Pass'])
const { maglocks, weeklyTestState, updateWeeklyTestState, addFailedMaglocksToArray } = props
3
javascriptreactjsreact-hooksjsxuse-effect
Can you paste the child component's declaration? i.e. the part where you name the component - tmdesigned
Sure! I have edited my post. - GaB
Thanks, it wasn't clear if updateWeeklyTestState was being properly pulled out of props, but it looks like you have that down. - tmdesigned

3 Answers

1
votes

try this 

   useEffect(() => {
        if(updateWeeklyTestState){
           updateWeeklyTestState (failList, maglockDropdown)
        }
   }, [maglockDropdown])

or this 

  export default function Maglocks (props) {
  const { maglocks, weeklyTestState, updateWeeklyTestState, addFailedMaglocksToArray } = props
  const [maglockDropdown, setMaglockDropdown] = useState(['Pass'])
0
votes

by now(without anything async in your useEffect) it's safe to ignore warning. Otherwise if setWeeklyTest is not coming from useState or useCallback you may face "stale data issue"(so it will be called with wrong/out-of-date input data).

On the other side, if you just put updateWeeklyTestState into useEffect's dependency, you will get body running each time parent re-renders(that could be against your needs).

So I propose also declare updateWeeklyTestState as useCallback so it would be referentially the same:

const updateWeeklyTestState = useCallback((name, value) => {
setWeeklyTest({
  ...weeklyTest, [name]: value
})}, [setWeeklyTest]);

and then adding as a dependency to useEffect will not break your logic:

useEffect(() => {
  updateWeeklyTestState (failList, maglockDropdown)
}, [maglockDropdown, updateWeeklyTestState])
0
votes

Its simply linting warning as you said.

Here,

useEffect(() => {
  updateWeeklyTestState (failList, maglockDropdown)
  }, [maglockDropdown])

the hook depend on updateWeeklyTestState.So,it need to passed to hooks as a dependancy list.

Because of missing dependancy linting giving this warning.