The Complete Developer Guide to React 19, Part 2: New Enhancements

React 19: Improvements and Additions

Ref as a prop

React 19 makes using <rte-code>forwardRef<rte-code> obsolete by adding <rte-code>ref<rte-code> as a default prop for function components just like <rte-code>children<rte-code>. This change will definitely simplify the way <rte-code>ref<rte-code> is utilised 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 <rte-code>forwardRef<rte-code> usage in codebases and eventually <rte-code>forwardRef<rte-code> will be deprecated.

An important thing to note here is that passing <rte-code>ref<rte-code> 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 <rte-code>ref<rte-code> 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:

And after:

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:

1. <rte-code>onCaughtError<rte-code>: called when React catches an error in an Error Boundary.
2. <rte-code>onUncaughtError<rte-code>: called when an error is thrown and not caught by an Error Boundary.

Before:

After:

Context as a provider

Context consuming is getting a bit simpler with React 19. Developers no longer need to use <rte-code><Context.Provider><rte-code> but instead they could directly use the <rte-code><Context><rte-code> 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 <rte-code>useState<rte-code>, <rte-code>useDefferedValue<rte-code> will now also have an initial value available:

When <rte-code>initialValue<rte-code> is provided, <rte-code>useDeferredValue<rte-code> 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 <rte-code>deferredQuery<rte-code> will keep its previous value until the data has loaded, so <rte-code>SearchResults<rte-code> 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:

• The Complete Developer Guide to React 19, Part 1: Async Handling
• The Complete Developer Guide to React 19, Part 3: Upgraded Support