Everything you have to know about React 19 ⚛️

#react19 #react #javascript #compiler

🤓 I want to equip you with the needed knowledge for before the new update will hit your production.

Why this updated was created?

The idea of the udpate is to make the UI more Optimistic less struggle, less code, and less external libraries.

What is Optimistic UI?

The Optimistic UI is the way to show user a change in the UI before the response from the server reaches the client.

5 features that will help you implement a better UI with React 19

1. useOptimistic

New hook useOptimistic will help us to calculate the optimistic value within a single hook.

import { useOptimistic, useState } from 'react';
function AppContainer() {
  const [state, setState] = useState()
  const optimisticState, addOptimistic] = useOptimistic(
    state,
    // updateFn
    (currentState, optimisticValue) →> {
   // merge and return new state
   // with optimistic value   
   }
}

2. useTransition

hook useTransition which was added previously, right now the async transitions are supported

function UpdateName() {
    const [name, setName] = useState("");
    const [error, setError] = useState(null);
    const [isPending, startTransition] = useTransition();

    const handleSubmit = () => {
        startTransition(async () => {
            const error = await updateName(name);
            if (error) {
                setError(error);
                return;
            }
            redirect("/path");
        });
    };

    return (
        <div>
            <input 
                value={name} 
                onChange={(event) => setName(event.target.value)} 
            />
            <button onClick={handleSubmit} disabled={isPending}>
                Update
            </button>
            {error && <p>{error}</p>}
        </div>
    );
}

useTransition is helping us to update state without blocking the UI and providing the pending state by default.

3. New API `use`

New function use will help us to resolve async actions.

import {use} from 'react';

function Comments({commentsPromise}) {
  // `use` will suspend until the promise resolves.
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

We can also resolve the Context with the use function

import {use} from 'react';
import ThemeContext from './ThemeContext'

function Heading() {

  const theme = use(ThemeContext);
  return (
    <h1 style={{color: theme.color}}>
      {children}
    </h1>
  );
}

4. Ref as a prop

Best feature of the new update 🚀

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

No need for the forwardRef since React 19 👏

5. React Compiler

React Compiler is a tool to automatically optimize your code at a build time.

What we expect from the compiler?

Skipping cascading re-rendering of components Re-rendering <Parent /> causes many components in its component tree to re-render, even though only <Parent /> has changed.
Skipping expensive calculations from outside of React For example, calling expensivelyProcessAReallyLargeArrayOfObjects() inside of your component or hook that needs that data
Memoizing deps to effects To ensure that a dependency of a hook is still === on re-rendering so as to prevent an infinite loop in a hook such as useEffect()

🤰 When do we expect Compiler?

My assumption is late 2024, the info I got from the Andrew's Clark post on X.

🏁 Finish

Share in comments your thoughts regarding how React codebase will be similar to any other JS framework after the Compiler being integrated in the codebases 😁

Have a good React 19 🚀