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

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_ ?

this edge case: function SomeComponent({ foo }) { const refOne = ref => { // … } const refTwo = ref => { // … } return <div ref={foo ? refOne : refTwo} /> }

I smell a closeted Svelte user

stale closures

Because it's a new function each render unless wrapped in callback. Conditional rendering, making it based on props/outside variables etc. can easily change the logic on next render and React can't know when it's safe to call again and when it's not.