Post

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

This is probably my favorite part of React 19. Such a simple yet powerful solution!

One of my favorite changes in v19. Callback refs are really good. I'll write another blogpost soon because my recommendation to wrap in useCallback might not be 100% correct.

this is syntactically nicer for sure but can you not do the same thing pre-19 by checking whether the ref is null?

You won't have access to things created in the callback when it gets called again with null. You can store in a ref but this is really a lot better.

Yeah, I'm curious about that. I recognize this pattern from SolidJS but I imagine React will run this ref callback on every re-render. Could that be an issue for, say, `document.addEventListener` use cases?

If you can extract the function outside of the component, you won't have that issue. If your code still runs correctly (just not very performant), wrap in useCallback.

though, it appears to introduce a stale closure, so you may need a useCallback, e.g. for event listeners