React 18 : Nouveautés

React 18 marque une étape importante dans l’évolution de la bibliothèque JavaScript la plus populaire pour construire des interfaces utilisateur. Cette version introduit des améliorations significatives en termes de performance, de manière de gérer le rendu et de nouvelles API pour un développement plus fluide.

Les Nouveautés Clés de React 18

Mode Concurrent (Concurrent Rendering)

Contrairement au mode synchrone des versions précédentes, le mode concurrent donne la priorité aux mises à jour importantes tout en différant les mises à jour moins prioritaires. Cela permet d’améliorer la réactivité, de rendre les animations plus harmonieuse, et de mieux gérer les ressources.

Pour activer le mode concurrent, il faut ajouter le flag concurrent au package.json

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "concurrent": true
}

Le composant Suspense est l’un des composants clés du mode concurrent. Il permet de reporter l’affichage des certaines parties de votre UI en attendant que la donnée soit disponible.

Exemple :

function MyComponent() {
  const data = useAsyncData();

  return (
    <Suspense fallback={<Loading />}>
      <div>
        {data.map((item) => <Item key={item.id} />)}
      </div>
    </Suspense>
  );
}

Pour utiliser correctement le mode concurrent, il est recommandé d’utiliser l’API startTransition (transitions automatiques), d’éviter les larges composants ainsi que d’utiliser les composants pures et la mémorisation. Nous détaillerons cela dans un prochain article.

Transitions Automatiques

React 18 permet de signaler des mises à jour non urgentes à l’aide de startTransition. Cela garantit que ces mises à jour n’interrompent pas les interactions utilisateur.

Exemple :

import { useState, startTransition } from 'react';

function App() {
  const [text, setText] = useState('');
  const handleChange = (e) => {
    startTransition(() => {
      setText(e.target.value);
    });
  };
  return <input onChange={handleChange} value={text} />;
}

Fonctionnement du Routing en React 18

Le routing avec React 18 est encore plus performant grâce à Suspense et au chargement des composants de manière asynchrone. En utilisant des bibliothèques comme React Router, nous pouvons exploiter pleinement ces fonctionnalités.

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Chargement...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Ici, Suspense gère l’état de chargement des composants pour un rendu plus fluide.

Suspense et Gestion des Délais de Chargement

Suspense est une fonctionnalité clé de React 18 qui permet de gérer facilement les composants ou données en attente de chargement. Voici un exemple pratique avec un composant chargé de manière différée :

Exemple :

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => new Promise(resolve => {
  setTimeout(() => resolve(import('./LazyComponent')), 2000);
}));
function App() {
  return (
    <div>
      <Suspense fallback={<div>Chargement en cours...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

Ce composant LazyComponent ne sera chargé qu'après deux secondes, et pendant ce temps, l'état "Chargement en cours..." sera affiché.

Changements Concernant les Hooks

Avant React 18

Dans les versions précédentes, useMemo était utilisé pour mémoriser une valeur calculée et éviter des calculs inutiles. Son comportement était totalement déterminé par la liste des dépendances fournie.

Avec React 18

Bien que son fonctionnement de base reste le même, useMemo peut maintenant exploiter les avantages du mode concurrent.

Exemple :

import React, { useMemo, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(0);
  const expensiveCalculation = useMemo(() => {
    console.log('Calcul intensif');
    return count * 2;
  }, [count]);
  return (
    <div>
      <h1>Résultat : {expensiveCalculation}</h1>
      <button onClick={() => setCount(count + 1)}>Incrémenter le compteur</button>
      <button onClick={() => setOtherState(otherState + 1)}>Changer autre état</button>
    </div>
  );
}

Avec le mode concurrent, les mises à jour de faible priorité n’interrompent pas ce calcul, offrant ainsi une meilleure expérience utilisateur.

Conclusion

React 18 apporte des améliorations majeures qui bénéficient à la fois aux développeurs et aux utilisateurs finaux. Avec le mode concurrent, les transitions, et des fonctionnalités comme Suspense, cette version rend les applications plus fluides et performantes.