React 19 - Features and Updates

ReactJS is an open-source JavaScript library for building dynamic, single-page applications and creating reusable interactive UI components. React is developed and managed by META (earlier Facebook). ReactJS can be used to develop small applications as well as big, complex applications.

Table of Content

What is New in React 19?

React has introduced various new features and improvements including a new React compiler in its latest version React 19. React 19 has introduced hooks such as the useActionState hook for better state management, automatic cleanup for ref callbacks, and enhancements in concurrent rendering and new React compiler optimizes code for faster execution. All these features and improvements focus on improving performance and optimizing server components for faster server-side rendering. These improvements make React 19 a significant update for building more efficient and maintainable applications.

History of ReactJS

React was created by Jordan Walke, a Meta software engineer to address newsfeed performance issues. In 2011 it was deployed on Facebook's news feed and was integrated into Instagram in 2012.

Here is a history timeline of major React events:

• 2013: React was released to the public with features like component-based architecture and Virtual DOM.
• 2015: React Native was introduced for building mobile applications.
• 2016: React 15 was released with new updates improving performance.
• 2017: React 16 was released with new React Fiber architecture for better rendering.
• 2019: React 16.8 was released introducing hooks that helped in enhancing state management.
• 2020: React 17 was released introducing a new way to transform JSX to JavaScript and improving compatibility.
• 2022: React 18 was released with new features such as automatic batching, suspense, concurrent mode, and server-side rendering(SSR).

React 19 New Features

React Compiler

React compiler introduced in React 19 is still being developed. However, it has been made available to users to try out the compiler and provide feedback. It comes with new features such as code analysis and optimization.

React compiler converts the React codes to Javascript codes which improves application performance. It automatically memoizes your code so there is no need for using memoization tools like useCallback, useMemo, and memo. It applies memoization wherever is required rather than users manually using memoization where they expect memoization is needed, this results in cleaner code and increases readability by reducing unnecessary lines of code. Now users don't need to worry about state change and UI as it is now handled by the compiler itself.

React Actions

React 19 has introduced a new feature Actions which simplifies handling data mutation and state updates. Actions are functions that are called when a form is submitted, making form handling easier. React 19 comes with support for using async functions in transitions to handle pending states, errors, form handling, and optimistic updates automatically, which means users no longer have to manually manage these. Key features are as follows:

• Pending States: Action provides a pending state that is initiated at the beginning of a request and automatically resets when a final state update is committed.
• Optimistic Updates: Action supports new useOptimistic hook which allows developers to show users immediate feedback as the request is being submitted. For eg: as you send any text then it shows the prompt as sending while it is being sent.
• Error handling: Action provides error handling to display error boundaries upon request failure and optimistic update reverts back to its original value automatically.
• Forms Handling: The action and formAction props can be used in forms elements to access Action functionality. It helps in form submission and automatically resets the form after submission.

React Server Components

React Server Components is a very useful feature introduced in React 19. It renders ahead of time, before bundling, in a server separate from the client app or SSR server. It can directly render UI components on the server. By pre-rendering components on the server, RSC improves page loading time. It makes search engines more easily index and understand the page's content improving SEO.

• Server Components without a Server: Server components can be executed at build time to access the filesystem or fetch static content, hence web server is not required.
• Server Components with a Server: Server Components can also be executed on a web server during a page request. This lets the user access their data without building an API. It allows dynamic rendering where components render based on the latest data or user-specific request.
• Adding interactivity to Server Components: The Server component handles the rendering, and data fetching and they are not sent to the browser, so it can be integrated with the client component to add interactivity using the use client directive.
• Async Components with Server Components: Server Components allow users to write components using async/await syntax. While you 'await', React suspends and waits for the promise to be resolved, to resume rendering.

React 19 Hooks

React useActionState Hooks

React 19 introduces the useActionState hook which allows users to update state based on the result of a form action. It simplifies state management and form handling by combining the simplicity of handling forms with the power of state management. It aims to make state management more explicit, and readable, and reduce the complexity of each input field in your form. It accepts two parameters which are mentioned below:

• function: It represents a function to be called when a form is submitted. Upon function call, it receives the previous form state as its initial argument, followed by the usual argument of form.
• initialState: It represents the initial value of state.

It returns an array with two values which are:

• The currenstate matches the initialState during the first render and once the action is invoked, it matches the value returned by the action.
• Action: It is passed as an action prop to form components within a form.

Example

Here is an example demonstrating useActionState hook. The following example performs a login operation. The hook returns an array of three elements that are loginError which stores the error that occurred during login, loginAction function which triggers the login process and isLoginPending which tells if the login process is still ongoing.

const [loginError, loginAction, isLoginPending] = useActionState(
  async (previousState, info) => {
    const error = await performLogin(info);
    if (error) {
      // Returning the error if the login fails.
      return error;
    }

    // Returning null to indicate success.
    return null;
  },
  null,
);

React useFormStatus Hooks

React 19 introduces the useFormStatus hook which gives information about the status of last form submission. It allows child components to access the parent form's status directly without using a Context provider which reduces the need to pass form status through every single component in between. It prevents forms from getting resubmitted before it finishes submitting the current form.

It does not take any value as a parameter but returns a status object with the following properties:

• Pending: It returns a boolean value representing if the form is currently being submitted.
• Data: It is an object that contains the data that the parent form is submitting. It returns null if there is no active form submission or if there is no parent form.
• Action: It represents a reference to the function passed to action prop on parent form.
• Method: It represents a string value indicating whether form is using GET or POST HTTP method while submitting. By default, a form uses GET method.

Example

Here is an example demonstrating useFormStatus hook. In the following example, the submit button indicates whether the form submission is pending. During form submission, button will be disabled showing 'Registering', else 'Register'.

import {useFormStatus} from 'react-dom';

function RegisterButton() {
  const {pending} = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Registering' : 'Register'}
    </button>
  );
}

React useOptimistic Hooks

React 19 has introduced a new hook, useOptimistic hook which performs the optimistic update. It shows user immediate outcome while the update request is still in progress. It handles the optimistic UI update during asynchronous data mutations. It is useful with asynchronous action like real-time applications such as chatting applications where a user sends a message, then it immediately shows sending rather than making user wait till the message is delivered.

React use API

React 19 has introduced a new experimental API 'use'. It is a React API that lets you read the value of a resource like a Promise or context and lets you load a lot of resources asynchronously. It provides an alternative for hooks like useEffect() which is used for data fetching and useContext() which is used for rendering context data.

It accepts one parameter which is:

• resource: It represents the data from which you want to read value. It can either be a promise or a context.

It returns a single value which is the resolved value of promise or context read from resource.

Limitation

• User can only call use API inside a component or hook.
• In server component, prefer using async and await instead of use API. It is because use re-renders the component after data is resolved while async and await renders from the point await was invoked.

React 19 Improvements

Use ref as a Prop

In React 19, users can access ref as prop for functional component. With this improvement, it replaces the need to use forwardref and it will be deprecated in future versions of React.

The forwardRef allowed parent component to pass ref to child components, but now we can pass ref as prop, which makes forwardRef no longer needed making the code easily maintainable and increasing the readability of code.

Diffs for Hydration Errors

React 19 improved the error reporting for hydration errors. Earlier, it used to report errors without any information about the mismatch. Now, in React 19 it displays a single message of mismatch.

Use <Context> as a Provider

React 19 allows you to use <Context> as a provider rather than <Context.Provider>. In future versions <Context.Provider> will be deprecated.

const ThemeContext = createContext('');

function App({children}) {
  return (
    <ThemeContext value="dark">
      {children}
    </ThemeContext>
  );  
}

Cleanup Functions for Refs

React 19 introduced a new feature which is returning a cleanup function from ref callbacks. It defines the cleanup function within ref. This feature allows to define a cleanup function which will be automatically called when a ref is no longer needed for example when a ref changes or a component unmounts.

It eases resource management as refs-related necessary cleanup occurs automatically. It prevents the possibility of memory leaks and makes sure code is easily maintainable by proper cleanup.

Supported

Document Metadata

React 19 introduces a streamlined way to manage document metadata tags like <title>, <meta> and <link>. Earlier, these tags needed to be managed manually or by libraries like react-helmet, but React 19 offers a native approach to handle these elements directly within React components. While rendering, React will automatically hoist metadata tags to <head> section of document.

React 19 introduced a dedicated component DocumentHead allowing to declaratively define and update document metadata. It simplifies SEO management as it allows dynamic, component-level control of titles, descriptions, and meta tags. It makes sure that the search engine always receives the most recently updated and most accurate metadata, which improves the visibility and ranking of the web pages.

Stylesheets

React 19 offers easy management of Stylesheets whether external(<link rel="stylesheet" href="...">) or inline(<style>...</style>) as it provides built-in support that ensures they are inserted in DOM in correctly specified precedence order. This makes sure that external stylesheets are loaded before revealing dependent content.

During Server-Side rendering, React includes stylesheets in head tag which ensures browser waits to display content until the stylesheet has completely loaded. During Client-Side rendering, React waits for newly rendered stylesheet to load before committing. This allows stylesheets to be colocated with components which reduces complexity and only necessary styles are loaded.

React 19 support for stylesheet, reduces the complexity as it manages the complexity internally reducing manual work, helps in optimized rendering, and allows declarative styling.

Async Scripts

React 19 introduces improvement in managing async scripts. Async scripts loads in arbitrary order unlike normal HTML or deferred scripts which load in document order making rendering within component tree challenging. The key improvements are mentioned below:

• Flexible Placement: React 19 allows you to render async scripts anywhere in your component tree, even within components that depend on them eliminating the need to manage script relocation and deduplication manually.
• Automatic Deduplication:In React 19 even it is rendered from multiple components, React ensures async scripts are loaded and executed only once, reducing redundancy and improving efficiency by avoiding multiple script loads.
• Optimized SSR Loading:The async scripts are included in the head tag during 'Server-Side rendering' but it loads after critical resources such as stylesheets, fonts, and image preload prioritizing essential resources which improves overall rendering performance.

Preloading Resources

React 19 introduces built-in support for preloading resources for performance optimization. New APIs included in React 19 provide early information to the browser about the resources it will need, it significantly improves initial page loads and client-side updates. The key improvements are mentioned below:

• Faster Page Loads: Preloading additional resources like fonts and separating them from stylesheet improves the speed and performance of the initial page load.
• Faster Client-Side Updates: APIs prefetch resources for anticipated navigation and preload on click or hover for faster client-side updates.

Conclusion

In this article, we discussed about React 19 features and updates. We discussed ReactJS and it's history, various new features in React 19 which are: all new React Compiler, React Actions, React Server Components, React use API and React 19 hooks such as useActionState Hooks, useFormStatus Hooks and useOptimistic Hooks. We also discussed various improvements made in this version like using ref as a prop, cleanup functions for refs, and diffs for hydration errors. All these new features and improvements help in code optimization, efficient performance, and creating SEO-friendly web applications.