next.js
ccbcfff9 - fix ref merging for callback refs that return a cleanup function (#68123)

Commit
1 year ago
fix ref merging for callback refs that return a cleanup function (#68123) ### What Fix handling of user-provided refs in `Image` and `Link` to support [refs with cleanup functions](https://react.dev/blog/2024/04/25/react-19#cleanup-functions-for-refs) (new in React 19) ### Why React 19 allows [a new form of callback ref](https://react.dev/blog/2024/04/25/react-19#cleanup-functions-for-refs), which returns a cleanup function: ```ts (element: HTMLElement) => { console.log('hi ref!') return () => { console.log('bye ref!') } } ``` Unfortunately, this can be a breaking change for code that attempts to combine ("merge") multiple callback refs into one. With old-style callback refs, we never had to care about the return values. But with the introduction of cleanup functions, ignoring the return value can lead to logic errors (because the cleanup will never be called)! This was the case for `Image` and `Link`, both of which attempt to combine user-provided refs with their own callback refs, but were ignoring the return values, so they'd break if the user's ref returned a cleanup function. ### How This PR introduces a `useMergedRef(refA, refB)` hook that combines all forms of refs correctly (thanks @eps1lon for sketching it out!) and refactors Image and Link to use it.
Author
Parents
Loading