I'm so confused about the behaviour of useEffect in the following case:
Code snippet:
const verticesCount = selectionProvider.verticesSelectionProvider.count;
console.log('RENDER ---> COUNT = ', verticesCount);
useEffect(() => {
console.log('EFFECT : COUNT UPDATED ---> COUNT = ', verticesCount);
return () => console.log('USEEFFECT:CLEANUP');
}, [verticesCount]);
The console:
1: RENDER ---> COUNT = 0
2: EFFECT : COUNT UPDATED ---> COUNT = 0
3: RENDER ---> COUNT = 1
4: USEEFFECT:CLEANUP
5: EFFECT : COUNT UPDATED ---> COUNT = 1
6: RENDER ---> COUNT = 0
Without a better example it is difficult to tell what is the problem.
My guess is that verticesCount didn't change.
For example verticesCount was: 1, changed to 2, changed to 1, then changed one more time to 1
But because the state value didn't change the last time the useEffect didn't trigger. One possible solution:
const [update, setUpdate] = useState(false);verticesSelectionProvider toggle setUpdate(!update) every time vertices changeduseEffect() listen for update instead of verticesCount