React 18 est maintenant disponible sur npm et propose des fonctionnalités et des mises à jour intéressantes pour la communauté de développement React.js. Toutes les mises à jour visent principalement à maintenir les bibliothèques tierces en introduisant des fonctionnalités et des améliorations prêtes à l’emploi.

Les nouvelles fonctionnalités et améliorations de React 18 sont possibles grâce au nouveau mécanisme de « rendu simultané » opt-in dans React 18 qui permet à React de créer plusieurs versions de l’interface utilisateur en même temps. Bien que ce changement soit principalement en coulisse, il débloquera de nouvelles possibilités pour améliorer les performances de l’application.

Installation

Pour installer la dernière version de React :

npm install react react-dom

Présentation de la nouvelle API racine de React 18

Avant d’entrer dans les détails de la nouvelle API, examinons l’API racine existante.

L’API racine

Dans React, nous rendons notre composant App dans l’élément racine de la page. Ici, nous utilisons un exemple simple.

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('root');

//Initial render
ReactDOM.render(<App name="Saeloun blog" />, container);

// During an update, React would access the root of the DOM element
ReactDOM.render(<App name="Saeloun testimonials" />, container);

API racine héritée (legacy)

Cette racine API (maintenant appelée « API racine héritée ou legacy root API« ) a quelques problèmes lors de l’exécution des mises à jour. Nous devons continuer à passer le container dans le rendu, même s’il ne change jamais.

Pour résoudre ce problème et apporter quelques améliorations, React 18 a introduit une nouvelle API racine.

La nouvelle API racine

L’ajout de la nouvelle API racine résout le problème de transmission du conteneur lors de l’exécution des mises à jour. Nous n’avons plus besoin de passer le  container dans le rendu.

import ReactDOM from "react-dom";
import App from 'App';

const container = document.getElementById('root');

// Create a root.
const root = ReactDOM.createRoot(container);

// Initial render
root.render(<App name="Saeloun blog" />);

// During an update, there is no need to pass the container again
root.render(<App name="Saeloun testimonials" />);

Que se passe-t-il pour rendre les fonctions de rappel et d’hydratation ?

La nouvelle API racine se trouve être la passerelle pour accéder aux nouvelles fonctionnalités de React 18 et ajoute des améliorations prêtes à l’emploi.

Cela change également la façon dont le rappel de rendu et la fonction d’hydratation fonctionnent.

Rappeler

Dans l’API racine héritée, nous pourrions transmettre un rappel au rendu qui serait appelé après le rendu ou la mise à jour du composant.

import ReactDOM from 'react-dom';
import App from './App';

const container = document.getElementById('root');

ReactDOM.render(<App name="Saeloun blog" />, container, function () {
  // Called after inital render or any update.
  console.log('Blog rendered');
});

L’argument de rappel est complètement supprimé dans la nouvelle API racine en raison de difficultés à le chronométrer correctement. Il est recommandé d’utiliser requestIdleCallback, setTimeout, ou a ref callback à la racine.

//App.js

export default function App({ name, callback }) {
  return (
    <div ref={callback}>
      <h1>{name}</h1>
    </div>
  );
}

//index.js

import ReactDOM from "react-dom";
import App from 'App';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App name="Saeloun blog" callback={() => console.log("Blog rendered")} />);

hydrater()

hydrate() est similaire à render. Il est utilisé pour hydrater un conteneur dont le contenu HTML a été rendu par ReactDOMServer . React préserve le balisage et n’attache que les gestionnaires d’événements, offrant une expérience de premier chargement performante.

Voyons les changements d’hydrate avant et après la nouvelle API racine.

hydrate dans l’ancienne API racine –

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('root');

ReactDOM.hydrate(<App name="Saeloun blog" />, container);

Dans la nouvelle API racine, hydrate est déplacé vers l’API hydrateRoot comme ci-dessous –

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('root');

// Create and render a root with hydration.
const root = ReactDOM.hydrateRoot(container, <App name="Saeloun blog" />);

Noter:

React 18 embarque la nouvelle API racine ( ReactDOM.createRoot) avec l’ancienne API ( ReactDOM.render) pour encourager l’adoption progressive et faciliter les comparaisons de performances.

Si nous avons installé la version React 18 Alpha et n’avons pas mis à jour la nouvelle API racine, l’application ne prendra pas en charge les fonctionnalités présentes dans React 18.

Il donnera l’avertissement ci-dessous –

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
console.<computed> @ index.js:1