Twitter | Search | |
adam klein Jan 24
Reply Retweet Like
Ryan Florence Jan 24
Gotta stop thinking about it as the old life cycles with the [] trick. It’s an effect, and you need to clean up your effects that are long running. Return your cleanup function, declare your dependencies, no bugs. setTimeout, like in my talk at react conf, is the better model.
Reply Retweet Like
Ryan Florence
I’ve had a lot of people point to setInterval with hooks as some sort of egg on React’s face when it’s about the only example of stale state I’ve seen. If that’s the hardest thing in hooks then we are light years beyond class complexity 🤘🏼
Reply Retweet Like More
adam klein Jan 25
I'm actually in love with hooks, and been giving talks about how awesome it is. Just showing the gotchas and challenging my fellow twitter friends :)
Reply Retweet Like
Ryan Florence Jan 25
Then I’ll challenge you, come up with another stale state example 😛
Reply Retweet Like
adam klein Jan 25
I did, trying to re-implement react-redux with hooks (attached). I had a bug initially when I didn't have the 'curResult = nextResult' line. What do you think?
Reply Retweet Like
Dan Abramov Jan 25
Yeah I think you want a ref there?
Reply Retweet Like
Dan Abramov Jan 25
This is also why examples use const [] = useState — so that you're not tempted to reassign them
Reply Retweet Like
Ryan Florence Jan 25
If you show me another one of these with [] I’m blocking 😂 Return a cleanup function and get rid of your second arg or use it with the right deps but no more [].
Reply Retweet Like
adam klein Jan 26
Yes that would probably be much less confusing 😀
Reply Retweet Like
adam klein Jan 26
I am returning a cleanup function 😀 Not sure I follow, why not use []? For something like subscribing to store - why is it better to re-subscribe on every render?
Reply Retweet Like
adam klein Jan 26
or not on every render but every time curResult changes. that would actually avoid the stale state, but I wonder why it makes more sense
Reply Retweet Like
Dan Abramov Feb 4
Just leaving this here!
Reply Retweet Like
Mohsin Ul Haq Feb 4
i had a question on the exact same topic... thanks for clarifying
Reply Retweet Like
Fernando Helwanger Feb 4
Sorry to jump in, but I'm also curious. Is re-subscribing on every render really the best way to solve this? 🤔
Reply Retweet Like
Fernando Helwanger Feb 4
Maybe the `curResult` could be in the array, so you'd only resub when the result changes... 🤔
Reply Retweet Like
Julien Benchetrit Feb 4
A similar problem arises if you're trying to throttle or debounce a function.
Reply Retweet Like
adam klein Feb 4
Awesome! I love it that you see a repeating question/problem and write a very detailed post about it. One question - will it work well to pass [delay, callback] to the useEffect array param instead of saving the callback on a ref?
Reply Retweet Like
adam klein Feb 4
And then if the callback changes the interval resets. Something like this:
Reply Retweet Like
adam klein Feb 5
Yes, that was my reply to myself 😀 But I still wonder what is the reasoning behind re-subscribing, and is there a benefit other than handling stale state
Reply Retweet Like