Post

Important little nuance here about callback ref's cleanup function in React 19. If you are assigning a ref object in a callback ref and you decide to add a cleanup function, make sure you re-assign the ref during cleanup.

12/12/24, 4:43 pm4 reposts43 likes

the other nuance is that if the function changes, we will disconnect and reconnect on render (like a function dep in an effect). we need to do this because if you reference props, you need the new prop value. so you need a module level function if no props (like you have) or useCallback.

Yah, I appreciated @tkdodo.eu’s mention of this in his blog. I’d love to say this shouldn’t make a huge difference in app code but…I’ve seen app code

we really should add this to the docs

@mattcarrollcode.com

I had trouble understanding this so I wrote an example of the problem as I understand it in a CodeSandbox: codesandbox.io/p/sandbox/ke...

codesandbox.iocodesandbox.io

@mattcarrollcode.com

Working on adding it to the docs here: github.com/reactjs/reac...

github.comAdd troubleshooting section for hanging refs when using ref callback cleanup functions by mattcarrollcode · Pull Request #7372 · reactjs/react.devInspired by this post Preview