React 19: New Features List [Interview Ready]

Posted May 07, 2024

React 19 marks the highly anticipated next major release of the renowned React JavaScript library, designed for crafting dynamic user interfaces. This iteration enhances the existing React framework by introducing a host of new features and enhancements while ensuring compatibility with earlier versions. Expect powerful tools that streamline web development and boost performance, making React 19 a game-changer for developers.

Table of Contents

• React 19 Beta
• React 19 Launch Date
  • When is React 19 coming out?
  • When will React 19 stable be released?
• React 19 upcoming features list & changes
  • React 19 useFormStatus
  • React 19 useOptimistic
  • React 19 use hook
  • React 19 web components
  • React 19 usememo
  • React 19 compiler
  • React 19 server components
• React 19 should we be worried?
• Conclusion
• FAQs

React 19 Beta

React 19 Beta is now available on npm!

React 19 Launch Date

When is React 19 coming out?

Libraries can prepare for React 19 by adopting this BETA version.

When will React 19 stable be released?

React 19 stable is still work in progress!!

App developers should upgrade to React 18.3.0 and patiently await the stable release of React 19 as libraries and feedback drive further improvements.

Make sure you follow the official guide on GitHub and the official team on social media to stay updated with the latest developments.

React 19 upcoming features list & changes

Pre-requisites

1. Proficient in ReactJS
2. Proficient in HTML and JavaScript
3. Some practical experience in building web applications with ReactJS

React 19 useFormStatus

The useFormStatus Hook provides status information of the last form submission.

import { useFormStatus } from "react-dom";
import { submitForm } from "./myHelper.js";

function Submit() {
  // we will get pending state as true once we click on submit button
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

React 19 useOptimistic

useOptimistic is a React Hook that lets you optimistically update the UI.

function ChangeName({ currentName, onUpdateName }) {
  //optimisticName - we will set its value until we get data from API response for faster user experience
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

React 19 use hook

You can read a promise with use, and React will Suspend until the promise resolves:

import { use } from "react";

const fetchUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

const UsersItems = () => {
  const users = use(fetchUsers());

  // here we are avoiding useEffect and useState to get and set users on component mount
  //   useEffect(() => {
  //     oldApproachApiCall();
  //   }, []);

  //   const oldApproachApiCall = async () => {
  //     const data = await fetchUsers();
  //     setUsers(data);
  //   };

  return (
    <ul>
      {users.map((user) => (
        <div key={user.id} className="bg-blue-50 shadow-md p-4 my-6 rounded-lg">
          <h2 className="text-xl font-bold">{user.name}</h2>
          <p>{user.email}</p>
        </div>
      ))}
    </ul>
  );
};
export default UsersItems;

We are using the use hook to execute the fetchUsers instead of using the useEffect or useState hooks.

React 19 web components

React 19 embraces Web Components like a long-lost sibling.

Currently, integrating web components into React isn't straightforward. Typically, you either need to convert the web component to a React component or install extra packages and write additional code to make web components work with React. This can be frustrating.

Now you can use your favorite custom elements seamlessly within your React app. Say hello to interoperability! 🤝

But as of now, there are no further details on how the code will look. Stay tuned for a detailed article on this.

React 19 usememo

Previously, developers relied on techniques such as useMemo(), useCallback(), memo, and so on to manage re-rendering. But with React 19, such manual interventions will no longer be necessary.

You won't need to use the useMemo() hook after React19, as React Compiler will memoize by itself.

React 19 compiler

Currently, React doesn't automatically re-render upon state change. To optimize these re-renders, developers typically resort to using useMemo(), useCallback(), and memo APIs manually. According to the React team, this manual approach represented a "reasonable compromise." Their goal was to delegate the management of re-renders to React.

However, the React team recognized the challenges of manual optimization and took note of the community's feedback, prompting them to address this issue.

As a result, the React Team introduced the "React compiler." This new tool will handle re-renders automatically, determining how and when to update the state and UI without developer intervention.

This also eliminates the necessity of utilizing useMemo(), useCallback(), and memo.

React 19 server components

If you're not yet familiar with server components, you're missing out on one of the most exciting advancements in React and Next.js.

Traditionally, React components have operated mainly on the client side. However, React is introducing a groundbreaking concept: running components on the server side.

The notion of server components has been around for years, with Next.js leading the charge in their practical implementation. Starting from Next.js 13, all components default to server components. To have a component operate on the client side, you'll need to use the "use client" directive.

In React 19, server components will be seamlessly integrated into React, offering several advantages:

1. Enhanced SEO: Server-rendered components improve search engine optimization by providing more accessible content for web crawlers.
2. Performance Boost: Server components contribute to faster initial page loads and overall performance enhancements, especially for content-rich applications.
3. Server-Side Execution: Server components enable efficient execution of code on the server, streamlining tasks like API calls.

React 19 should we be worried?

No!

Changes can be scary, but fear not! React 19 is here to elevate your development experience. Just keep an eye on the React documentation, attend meetups, and chat with fellow devs.

Together, we’ll conquer any challenges that come our way! 💪

Conclusion

Among the React versions, React 19 stands out with its significant updates and features that aid developers in streamlined development and in building SEO-friendly web applications. From the Compiler to newly introduced hooks, React 19 brings noteworthy enhancements that empower developers to improve performance.

Upgrading to React19 can enable businesses to craft high-quality web applications, developers to write more readable and maintainable code, and end users to enjoy enhanced UI experiences and improved performance.

FAQs

1. What is new React 19? React 19 new changes covers - React 19 actions, React 19 useFormStatus, React 19 useOptimistic, React 19 use hook, React 19 web components, React 19 usememo, React 19 compiler, React 19 server components and etc.

2. Has React 19 been released? This beta release is for libraries to prepare for React 19. App developers should upgrade to 18.3.0 and wait for React 19 stable as we work with libraries and make changes based on feedback. Source - react.dev

3. What is the difference between React 18 and 19? There are several features/changes introduced in React 19 like the 'use' hook, React Compiler, React Server Components in React itself(currently its only available in Next.js).

4. How to upgrade React 19? Read here for the steps - react.dev

5. What are the benefits of React 19? Its about 'write less and develop more'. React new changes helps developers to write less code by using various new features like 'use' hook, React Compiler. Also to get high perfomance using React Server Components.