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

No items found.

In short

This article, part two of "The Complete Developer Guide to React 19," delves into the new enhancements introduced in React 19. Key highlights include the addition of <rte-code>ref<rte-code> as a default prop for function components, eliminating the need for <rte-code>forwardRef<rte-code>, and an improved error reporting system that enhances debugging for both client and server environments.

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:

screenshot with error warnings in console before

And after:

screenshot with error warnings in console 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:

Error reporting - before

After:

Error reporting - 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:

FAQ

No items found.
React Galaxy City
Get our newsletter

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.