react useEffect with function received as props from parent component - reactjs

Question

I have a parent component
import React ,{useState} from 'react'
import ChildComponenet from './child'
export default function App() {
const [parentValue , setParentValue] = useState(0)
const someParentfunc = (input1,input2)=>{
setParentValue( parseInt(input1,10) +parseInt(input2,10))
}
return (
<div className="App">
Add : {parentValue}
<ChildComponenet someParentfunc={someParentfunc} />
</div>
);
}
now the child component :
import React ,{useState,useEffect} from 'react'
function ChildComponenet({someParentfunc}) {
const [input1 , setInput1] = useState(10)
const [input2 , setInput2] = useState(20)
useEffect(() => {
someParentfunc(input1,input2)
}, [input1,input2])
return (
<div>
<input type="text"
value={input1}
onChange={event => setInput1(event.target.value) }
/>
<input type="text"
value={input2}
onChange={event => setInput2(event.target.value) }
/>
</div>
)
}
export default ChildComponenet
the error is: React Hook useEffect has a missing dependency: 'someParentfunc'. Either include it or remove the dependency array.
should I add someParentfunc in the useEffect , will it be right approach :
useEffect(() => {
someParentfunc(input1, input2);
}, [input1, input2,someParentfunc]);
the working project link is : https://codesandbox.io/s/competent-kare-kce02?file=/src/child.js

Answer 1

someParentfunc is not using any value from it closures and so if you avoid it in in the dependency, there shouldn't be any problem. However for the purpose of ou code being extendable you should try to follow the patterns and add it in the dependenccy so that if doesn't cause any issues if the function is updated in future
To add it as a dependency you should make sure to use useCallback function so that the function is not re-created on each re-render
export default function App() {
const [parentValue , setParentValue] = useState(0)
const someParentfunc = useCallback((input1,input2)=>{
setParentValue( parseInt(input1,10) +parseInt(input2,10))
}, [setParentValue]);
return (
<div className="App">
Add : {parentValue}
<ChildComponenet someParentfunc={someParentfunc} />
</div>
);
}
Now you can add it to the useEffect dependenccy in child component
function ChildComponent({someParentfunc}) {
const [input1 , setInput1] = useState(10)
const [input2 , setInput2] = useState(20)
useEffect(() => {
someParentfunc(input1,input2)
}, [input1,input2, someParentfunc])
return (
<div>
<input type="text"
value={input1}
onChange={event => setInput1(event.target.value) }
/>
<input type="text"
value={input2}
onChange={event => setInput2(event.target.value) }
/>
</div>
)
}