Everything you have to know about React 19 ⚛️
Tags: react19, react, javascript, compiler
Published: 2024-06-29 17:57:59

🤓 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.
```javascript
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

```javascript
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.

```javascript
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

```javascript
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?

1. 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.
2. Skipping expensive calculations from outside of `React`
For example, calling `expensivelyProcessAReallyLargeArrayOfObjects()` inside of your component or hook that needs that data
3. 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](https://x.com/acdlite/status/1758229889595977824).

## 🏁 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 🚀