.webp)
React 19: Improvements and Additions
Ref as a prop
React 19 makes using forwardRef obsolete by adding ref as a default prop for function components just like children. This change will definitely simplify the way ref is utilized, especially for new developers as the concept can be a bit too complex to comprehend if you are new to React.
To further simplify the process, the React team will provide a codemon to update existing forwardRef usage in codebases and eventually forwardRef will be deprecated.
An important thing to note here is that passing ref as a prop would not work on class components as ref references the component instance.
That’s not the only change refs are getting, however. In React 19, returning a cleanup function from ref callbacks will be supported as well:
When the component unmounts, React calls the cleanup function returned from the ref callback. Returning anything else from a ref callback will be rejected by TypeScript, so implicit returns will now have to be modified:
Diffs for Hydration Errors
The way errors are reported in the console for hydration errors in react-dom is massively improved in React 19 as well. Logging multiple errors in DEV mode with almost no useful information at all has now been changed to logging a single, informative message with a diff of the mismatch which will help developers quickly spot and fix a bug.
This change will also improve the debugging for the server-side react functionality because on the server we don’t have the Dev Tools equivalent as we do on the client side with browsers and logging more useful information will be of assistance.
An example of before:
.png)
And after:
.png)
Improved error reporting
Currently, duplicate errors are logged for caught errors filling the console with unnecessary messages. In React 19, error reporting is improved to remove duplication and provide clearer insights into component failures. Instead of multiple messages for every caught error, there is now a single error message with all the useful information included.
Additionally, two new root options to complement onRecoverableError are added:
- onCaughtError: called when React catches an error in an Error Boundary.
- onUncaughtError: called when an error is thrown and not caught by an Error Boundary.
Before:
.png)
After:
.png)
Context as a provider
Context consuming is getting a bit simpler with React 19. Developers no longer need to use <Context.Provider> but instead they could directly use the <Context> itself as a provider.
The react team will be publishing a codemon to convert existing providers in codebases and eventually <Context.Provider> will be deprecated.
useDefferedValue initial value
Similar to useState, useDefferedValue will now also have an initial value available:
When initialValue is provided, useDeferredValue returns it as the value for the initial render of the component, scheduling a re-render with the deferred value in the background.
An example of why this would be useful is if you want to show stale content while the fresh content is still loading:
The query will update immediately, so the input will display the new value. However, the deferredQuery will keep its previous value until the data has loaded, so SearchResults will show the stale results for a bit.
Read the other parts of the guide
That's it for this part of the guide. You can check the previous part where we discuss streamlined Async Handling. In the final installment, we explore the upgraded resource support in React 19:
