What's new in React 19

let's take a look at what's new in React 19

ReactJS 19 is here, and it’s packed with features that redefine how we think about building modern web applications. This version doesn’t just introduce updates—it gives us tools to build smarter, faster, and more interactive apps. Let’s break it down in a new and exciting way, exploring these features like they’re game-changing tools for developers.

No More Memorization: React 19 Does the Heavy Lifting

In earlier React versions, developers used useCallback, useMemo, and React.memo to manually prevent unnecessary re-renders and optimize performance. With React 19, the compiler takes over this job. It intelligently analyzes the component tree and ensures that unnecessary renders are avoided without you having to add manual hooks.

Before React 19: Managing Memorization Manually

Here’s an example from the past, where you’d rely on useCallback and useMemo to optimize rendering:

import React, { useState, useCallback, useMemo } from "react";

const ExpensiveComponent = React.memo(({ compute, value }) => {
  console.log("ExpensiveComponent rendered");
  return <div>Result: {compute(value)}</div>;
});

function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState("");

  const compute = useCallback((val) => {
    console.log("Expensive computation");
    return val * 2;
  }, []);

  const expensiveValue = useMemo(() => compute(count), [compute, count]);

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={() => setCount((c) => c + 1)}>Increment Count</button>
      <ExpensiveComponent compute={compute} value={count} />
    </div>
  );
}

export default App;

With React 19: Goodbye Memorization, Hello Simplicity

With React 19, you can skip all the useCallback, useMemo, and even React.memo. The React compiler optimizes the code automatically, ensuring efficient renders.

import React, { useState } from "react";

const ExpensiveComponent = ({ compute, value }) => {
  console.log("ExpensiveComponent rendered");
  return <div>Result: {compute(value)}</div>;
};

function App() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState("");

  const compute = (val) => {
    console.log("Expensive computation");
    return val * 2;
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={() => setCount((c) => c + 1)}>Increment Count</button>
      <ExpensiveComponent compute={compute} value={count} />
    </div>
  );
}

export default App;

Note: The React compiler is currently an experimental feature that can be added as a Babel plugin. It does not guarantee performance optimization when completely removing useCallback, useMemo, and memo.

No More forwardRef

In React 19, forwardRef is no longer needed! You can now pass ref to child components like any other prop, and React automatically handles it.

Before React 19: Using forwardRef

import React, { forwardRef } from "react";

const Input = forwardRef((props, ref) => (
  <input {...props} ref={ref} />
));

function App() {
  const inputRef = React.useRef();

  return <Input ref={inputRef} />;
}

export default App;

With React 19: Just Pass ref

function Input(props, ref) {
  return <input {...props} ref={ref} />;
}

function App() {
  const inputRef = React.useRef();

  return <Input ref={inputRef} />;
}

export default App;

React 19 takes care of ref handling behind the scenes, so you can write components without the extra forwardRef boilerplate.

The use Hook - The Game Changer

The new use hook in React 19 is a multi-purpose tool that simplifies async data fetching and content reading, effectively replacing useEffect and useContent for these use cases. It makes working with promises seamless.

Before React 19: Fetching Data with useEffect

import React, { useState, useEffect } from "react";

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("/api/user")
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []);

  if (!user) return <p>Loading...</p>;

  return <h1>Welcome, {user.name}!</h1>;
}

With React 19: Simplified with use

function UserProfile() {
  const user = use(fetch("/api/user").then((res) => res.json()));

  return <h1>Welcome, {user.name}!</h1>;
}

Form Actions

React 19 introduces Form Actions, enabling direct handling of form submissions without event listeners. You can use the action prop in the form tag to bind functions, and directly access the formData object for form values.

function App() {
  async function handleSubmit(formData) {
    const name = formData.get('name'); // Convert formData to a plain object
    // call you server-side API if needed
    console.log("Submitted Data:", data);
  }

  return (
    <form action={handleSubmit}>
      <label>
        Name:
        <input name="name" type="text" />
      </label>
      <label>
        Email:
        <input name="email" type="email" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Why This Is Powerful

• No Manual Event Handling: No need to add onSubmit handlers or listen to submit events manually.
• Direct Access to Form Data: Use formData directly for a simpler and cleaner workflow.

New Hooks in React 19

React 19 introduces several new hooks to simplify and enhance state and action management. Here’s a quick overview with examples:

useFormStatus: Real-Time Form Submission Status

Tracks the status of a form submission (e.g., pending, success, or error).

import { useFormStatus } from "react";

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

useActionState: Manage Action States

Tracks the state of asynchronous actions, making it easier to handle loading, success, or error states.

import { useActionState } from "react";

function MyComponent() {
  const { isLoading, error } = useActionState("fetchData");

  return (
    <div>
      {isLoading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

useOptimistic: Handle Optimistic UI Updates

Simplifies creating optimistic updates by managing temporary state before confirming server responses.

import { useOptimistic } from "react";

function Counter() {
  const [count, setCount] = useOptimistic(0, (prevCount) => prevCount + 1);

  const handleIncrement = () => setCount();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

🎉 Happy Coding! 💻