🎉 Les Nouveautés de React 19

React 19 a été récemment dévoilé par Meta, apportant des nouveautés révolutionnaires presque deux ans après React 18.3. Voici les principales mises à jour, accompagnées d'exemples de code :

🌟 1. La Nouvelle Fonction use

✅ Exemple avec une Promesse

La nouvelle fonction use permet de lire facilement les valeurs des promesses, notamment en utilisant Suspense. Vous pouvez ainsi gérer les états asynchrones de manière élégante sans code complexe supplémentaire.

import { use } from 'react';

const UserData = ({ promiseForUser }) => {
    const user = use(promiseForUser);

    return (
        <div className="user-data">
            <h1>{user.name}</h1>
            <p>{user.email}</p>
        </div>
    );
};

Et pour notre promesse :

import { Suspense } from 'react';
import UserData from './UserData';

function App() {
    const promiseForUser = fetch('https://jsonplaceholder.typicode.com/users/1').then((res) => res.json());

    return (
        <Suspense fallback={<div>Loading user data...</div>}>
            <UserData promiseForUser={promiseForUser} />
        </Suspense>
    );
}

export default App;

‍

🌐 Exemple avec un Contexte

use permet également de consommer des contextes directement, simplifiant encore davantage l'accès aux valeurs partagées dans votre application, sans nécessiter de Provider.

import { createContext, use } from 'react';

const ThemeContext = createContext();

function DisplayTheme() {
    const theme = use(ThemeContext);

    return (
        <div style={{ background: theme }}>
            Current Theme: {theme}
        </div>
    );
}

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

‍

👀 2. Améliorations des Refs

Les refs peuvent maintenant être passées directement comme des props, éliminant le besoin de forwardRef. Cela simplifie grandement leur utilisation.

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

‍

🏎 3. Le Nouveau Hook useOptimistic

Ce hook améliore la réactivité de l'interface utilisateur en permettant des mises à jour optimistes. Vous pouvez afficher instantanément des résultats attendus pendant qu'une opération longue est en cours.

import { useOptimistic, useState } from 'react';

const TodoList = () => {
    const [todos, setTodos] = useState([
        { id: 1, text: "Learn React", completed: false }
    ]);

    const [optimisticTodos, newOptimisticTodo] = useOptimistic(
        todos,
        (state, newTodo) => [
            ...state,
            { id: `newTodo-${todos.length}`, text: newTodo, completed: false, pending: true }
        ]
    );

    return (
        <>
            <ul>
                {optimisticTodos.map(todo => (
                    <li key={todo.id} style={{ textDecoration: todo.completed ? "line-through" : "none" }}>
                        {todo.text} {todo.pending && "(Pending...)"}
                    </li>
                ))}
            </ul>

            <form onSubmit={async (e) => {
                e.preventDefault();
                const newTodo = e.target.elements.todo.value;
                newOptimisticTodo(newTodo);
                await sendNewTodoToBackend(newTodo);
            }}>
                <input name="todo" type="text" placeholder="New task" />
                <button type="submit">Add Todo</button>
            </form>
        </>
    );
}

‍

🔍 4. Gestion des Balises Meta

React 19 introduit la gestion native des balises meta comme title et meta tags. Vous pouvez maintenant personnaliser ces éléments directement dans vos composants React.

const ProfilePage = () => {
    return (
        <>
            <title>Profile Page</title>
            <meta name="description" content="View and update your profile" />
        </>
    );
}

‍

✨ 5. Composants Clients et Serveurs

📱 Composants Clients

Les composants client, comme dans les versions précédentes, sont rendus côté utilisateur.

💻 Composants Serveurs

Les composants serveur, une nouveauté de React 19, (même si il était déjà possible de les utiliser dans NextJS), permettent de rendre les composants côté serveur, améliorant ainsi les performances de chargement.

'use server';

export default async function Posts() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts = await res.json();

    return (
        <>
            {posts.map(post => <div key={post.id}>{post.title}</div>)}
        </>
    );
}

‍

📝 Les Server Actions

Les Server Actions permettent de sécuriser les appels API en exécutant des fonctions serveur dès qu'un formulaire est soumis.

const createUser = async (data) => {
    'use server';
    const newUser = {
        username: data.get('username'),
        password: data.get('password')
    };

    await fetch("/api/createUser", {
        method: 'POST',
        body: JSON.stringify(newUser)
    });
}

<form action={createUser}>
    <input name="username" placeholder="Username" id="username" />
    <input type="password" name="password" placeholder="Password" id="password" />
    <button type="submit">Create Account</button>
</form>

‍

🔗 Nouveaux Hooks useFormStatus et useActionState

Comment Utiliser useFormStatus ?

import { useFormStatus } from "react";

function SubmitButton() {
    const status = useFormStatus();
    return (
        <button disabled={status.pending}>
            {status.pending ? "Submitting..." : "Submit"}
        </button>
    );
}

const serverAction = async () => {
    "use server";
    await new Promise(resolve => setTimeout(resolve, 3000));
};

export default function FeedbackForm() {
    return (
        <form action={serverAction}>
            <SubmitButton />
        </form>
    );
}

‍

Comment Utiliser useActionState ?

import { useActionState } from "react";

async function incrementCounter(prevState) {
    return prevState + 1;
}

export default function Counter() {
    const [count, formAction, isPending] = useActionState(incrementCounter, 0);

    return (
        <form>
            <p>Count: {count}</p>
            <button formAction={formAction}>Increment</button>
            {isPending && <span>Updating...</span>}
        </form>
    );
}

‍

🤖 Le Nouveau Compilateur

La plus grande nouveauté est sans doute le nouveau compilateur, qui optimise intelligemment le code sans nécessiter des hooks comme useMemo ou useCallback, rendant le processus d'écriture bien plus simple et performant.

---

Avec sa version 19, le développement en React devient encore plus intuitif. Hâte de vous faire un retour après uitlisation de ces nouveautés🌟🚀

Pour l'installer sur votre projet suivez la doc

👉 https://fr.react.dev/blog/2024/04/25/react-19-upgrade-guide

‍

‍