Andrew's Digital Garden

Cleaning up refs

In React 19, ref now supports a cleanup function, similar to [[20220704105955-useeffect-cleanup-function]]. Previously, React would call ref functions with null when unmounting the component. If your ref returns a cleanup function, React will now skip this step.

In future versions, calling refs with null when unmounting components will be deprecated.

Due to the introduction of ref cleanup functions, returning anything else from a ref callback will now be rejected by TypeScript. The fix is usually to stop using implicit returns, for example:

- <div ref={current => (instance = current)} /> + <div ref={current => {instance = current}} />

[[20250219104457-react-ref-prop]]

[[react]]

Referred in

Cleaning up refs