I am having trouble knowing how the useEffect dependency array rules work.
By the docs I see that it tells me, we should include all the props/state/derived vars that are used inside the useEffect.
So let's say we want to execute some code when the param count changes, but access the innerCount value as well. By the docs it states I should add it to the dependencies list to prevent the code from having stale values from previous renders, but technically it will always get the correct value even if I don't pass it in the dependency list...
And also if I do add it to the dependency list, that means I would have to do double validation inside the useEffect just to run that code ONLY when count has changed from its previous value...
function Component({ count }) {
const [innerCount, setInnerCount] = useState(0);
useEffect(() => {
console.log('innerCount', innerCount);
setInnerCount(innerCount + 1);
}, [count]);
return <div>
<span>Count: {count}</span>
<span>innerCount: {innerCount}</span>
</div>;
}
My point is, should I follow react docs and always include all dependencies of the useEffect which adds a lot of complexity? or just ignore it for these cases when stale values will not happen?
