Post

Woah, `ref` as a function is secretly so powerful. No more `undefined` checks and useEffects just to add some document event listeners. Handle everything with a function in-line 👍

unless refs changed while i wasn’t looking you need to wrap this in `useCallback`, otherwise it’ll call both the cleanup and setup function again every single render

Looking forward to the compiler leaving beta to make React feel less esoteric in situations like this

The compiler won't wrap an inline function here in useCallback for you because it changes semantics. /cc @gsathya.bsky.social

It should work the same though

Hmm isn't it the same as having a useEffect without dependency array, and then adding an empty one to it? That changes st which time / how often it runs.

I'm referring to this discussion: bsky.app/profile/gsat...

What’s the use case for needing to run every render? Seems like a hacky way to do side effects in render

Then why does react call it on every render 😅?

if you create it anonymously during render, react can’t know whether it’s actually the same function from the last render. so it cleans up the previous one and sets up the new one

I was just thinking that if there is no use-case to run it on every render, why not just call it only _once_ ?

stale closures

youtu.be/7yw_D3h4xSo?... If this video is true, I hope we stop using this term.

The video seems hung up on the wrong thing: many blog posts describe the problem with an incorrect analogy. Yet, "stale closure" is an apt description if you ignore the bad long-text blog description. Better would be "closure over a stale variable", but that would be unneccessarily long I guess.

I usually describe it like this: The callback holds a reference to the variable X at the time it was defined, and that variable will never be updated. Instead, a new variable also named X will be created in a future render with the new value, available to a new callback that also has the same name.