So I have this React component which uses the useEffect() hook:
const [stateItem, setStateItem] = useState(0);
useEffect(() => {
if (condition) {
myFunction();
}
}, [stateItem]);
const myFunction = () => {
return 'hello';
}
React gives me a warning about 'myFunction' being a missing dependency. I (think I) understand why and I've read through many similar questions asking for more or less the same thing, but the answer is always 'move your function into the useEffect hook'. This would be fine if not for myFunction being called from different places, e.g.:
...
return (
<Button onClick={() => myFunction()} />
);
therefore I cannot put my function inside the useEffect hook.
One answer to a similar question was to put the function outside the component, but that would require me to pass a lot of data to my functions, e.g.
const myFunction(stateItem, setStateItem, someProp) => { stuff };
which gets extremely tedious when there are several functions with many props, state hooks etc. to pass.
Aside from putting a linter ignore comment above the useEffect hook, is there anything more practical to do about this? I'm finding these things to make using react hooks very impractical.