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 👍 - ThreadSky

bholmes.dev • 95 days ago

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 👍

Comments

shrjamal.bsky.social•95 days ago

That something I really liked in SolidJs

baxuz.bsky.social•94 days ago

I wasn't aware that you couldn't have refs as functions before in React.

I've been out of the loop for a while now.

jakelazaroff.com•95 days ago

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

phen.dev•95 days ago

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

tkdodo.eu•95 days ago

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

ricky.fm•95 days ago

It should work the same though

tkdodo.eu•94 days ago

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.

tkdodo.eu•94 days ago

I'm referring to this discussion: https://bsky.app/profile/gsathya.bsky.social/post/3lbjrnid63k23

tefkah.com•95 days ago

that's really nice, has the potential to clean up so much cruft

scottykaye.com•94 days ago

This is big, love it.

brockherion.bsky.social•95 days ago

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

canrau.com•95 days ago

Agree, also finally getting rid or forwardRef is exciting 🥰

fredericrous.com•94 days ago

This is going change how I write a number of components 😲. Looks like I’ll be relying on useEffect a lot less now!

haz.dev•94 days ago

The next step is for the ref prop to accept an array and only execute the callbacks that changed between renders, instead of all of them.

silvenon.com•95 days ago

I recently wanted this so bad, and poof 💨 it's here!

tkdodo.eu•95 days ago

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.

jakelazaroff.com•95 days ago

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

tkdodo.eu•95 days ago

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.

jakelazaroff.com•95 days ago

oooh right you can just keep state in the closure rather than explicitly storing it somewhere

bholmes.dev•95 days ago

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?

mapleleaf.dev•95 days ago

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

orisomething.bsky.social•95 days ago

It’s cheaper than useCallback for sure

tkdodo.eu•95 days ago

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.github.io•95 days ago

Curious what the compiler is doing with these.

tkdodo.eu•95 days ago

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

magoz.com•94 days ago

TIL! Looking forward to the article, thanks!

retropragma.bsky.social•95 days ago

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

retropragma.bsky.social•95 days ago

p.s. i don't mean wrapping the ref callback in useCallback

Comments

Posting Rules

Reply