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 👍

React@react.dev

React v19 is now stable! react.dev/blog/2024/12...

react.devReact v19 – ReactThe library for web and native user interfaces

Dominik 🔮

@tkdodo.eu

6 Dec 2024

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.

Ben Holmes

@bholmes.dev

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?

6/12/24, 5:34 pm0 reposts5 likes

MapleLeaf 🍁

@mapleleaf.dev

6 Dec 2024

running addEventListener on every render is fine as long as you clean it up ¯\_(ツ)_/¯ often simpler that way anyways. perf-wise it's cheap too

Dominik 🔮

@tkdodo.eu

6 Dec 2024

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.

mehiel

@mehiel.github.io

6 Dec 2024

Curious what the compiler is doing with these.

Dominik 🔮

@tkdodo.eu

6 Dec 2024

Right now, optimize them. But that's likely wrong because it changes behavior. @gsathya.bsky.social is aware and will fix it :)