Nice video! An alternative approach worth mentioning which I've seen is storing the timeout in a ref and checking if one exists every time the useEffect callback runs. That allows setting the interval in a function that might be triggered by an onClick handler.
I have a question regarding stale closures. I'm interested in a scenario where you subscribe the component to a notification service that get's called from a socket message. So you subscribe to that service using useEffect with [], and you pass a callback that the notification service will call when he has an update. How can you avoid stale closures on this scenario. Thanks!
I was screaming STALE STATE VARIABLES all over google until I found your video, THANKS A LOT MAN !
You are awesome. Saw your video for the 1st time
You talk like an authority on the subject because you are. I find your videos very insightful, thank you.
Thanks man!
I didn't run into this kind of problem, yet. Thanks for this valuable info.
Nice video! An alternative approach worth mentioning which I've seen is storing the timeout in a ref and checking if one exists every time the useEffect callback runs. That allows setting the interval in a function that might be triggered by an onClick handler.
Yes, that also a good idea, and it would work.
Great explanation. I faced this stale closure problem and this video was very helpful.
Great video, explained clearly. useEffect is very useful but can also be tricky. Thank you for explaining it so clearly.
Very good explanation, thanks 👏👏
Very helpful as always!
thank you, brilliant explanation, loved your book as well!
Great work, but how about the third situation which is without the dependency array in useEffect and what kinda situation we have to use it?
You could also use a ref there.
very good explaination, thanks mate!
Thanks 🙏
Thanks, keep up the good work!
Very helpful and well explained.
Didn't fix the first useEffect in the end, tho.
This was helpful
Thanks a lot
I have a question regarding stale closures. I'm interested in a scenario where you subscribe the component to a notification service that get's called from a socket message. So you subscribe to that service using useEffect with [], and you pass a callback that the notification service will call when he has an update. How can you avoid stale closures on this scenario. Thanks!
I think that you would have to do like my event example: add all the dependencies to the useEffect array and unsubscribe/resubscribe on changes.
Good experience 👍
This is brilliant
I haven't watched the whole video, but hopefully eslint-plugin-react-hooks is mentioned as a way to never have to face this issue, ever
Since you’re wondering: yes, at the end of the video.
Thanks man
thanks for idea. Maybe something simple we can make?
useEffect(() => {
const intervalId = setInterval(() => {
setTimer((t) => t + 1);
}, 1000);
const timerId = setTimeout(() => {
const wpm = inp.current.value.split(" ").length;
alert(wpm);
clearInterval(intervalId);
clearInterval(timerId);
}, 5000);
}, []);
return (
)
interesting...