React v16.8 : celle avec les hooks

Avec React 16.8, les Hooks React sont disponibles en version stable !

Qu’est-ce que les Hooks ?

Les Hooks vous permettent d’utiliser l’état local et d’autres fonctionnalités de React sans avoir besoin d’écrire une classe. Vous pouvez aussi créer vos propres Hooks pour réutiliser de la logique à état dans plusieurs composants.

Si vous n’avez jamais entendu parler des Hooks, vous voudrez sans doute consulter une ou plusieurs des ressources suivantes :

• Introduction aux Hooks vous explique pourquoi nous ajoutons les Hooks à React.
• Aperçu des Hooks est un survol rapide des Hooks prédéfinis.
• Construire vos propres Hooks illustre la réutilisation de code grâce à des Hooks personnalisés.
• Comprendre les Hooks React explore les nouvelles possibilités que les Hooks permettent.
• useHooks.com met en lumière des recettes et démos de Hooks maintenues par la communauté.

Vous n’avez pas besoin d’apprendre les Hooks dès maintenant. Ils ne rompent pas la compatibilité ascendante, et nous n’avons aucune intention de retirer les classes de React. La FAQ des Hooks décrit leur stratégie d’adoption graduelle.

Pas de réécriture intégrale

Nous vous déconseillons de réécrire vos applications existantes d’un coup pour utiliser les Hooks. Essayez plutôt d’utiliser les Hooks dans vos nouveaux composants, et faites-nous part de vos retours. Le code utilisant les Hooks cohabitera très bien avec le code existant à base de classes.

Puis-je utiliser les Hooks dès aujourd’hui ?

Oui ! À partir de la 16.8.0, React inclut une implémentation stable des Hooks React pour :

• React DOM
• React DOM Server
• React Test Renderer
• React Shallow Renderer

Remarquez que pour activer les Hooks, tous les modules React doivent être en version 16.8.0 ou ultérieure. Les Hooks ne fonctionneront pas si vous oubliez, par exemple, de mettre à jour React DOM.

React Native prendra en charge les Hooks avec la version 0.59.

Outillage

Les Hooks React sont désormais pris en charge par les outils de développement (DevTools, NdT) React. Les dernières définitions TypeScript et Flow pour React les prennent aussi en compte. Nous vous conseillons fortement d’activer la nouvelle règle de linting eslint-plugin-react-hooks pour garantir les meilleures pratiques autour des Hooks. Elle sera prochainement activée par défaut dans Create React App.

Et maintenant ?

Nous avons décrit nos plans pour les prochains mois dans la feuille de route React récemment publiée.

Remarquez que les Hooks React ne couvrent pas encore tous les cas d’usages des classes, mais qu’ils y sont presque. À ce jour, seules les méthodes getSnapshotBeforeUpdate() et componentDidCatch() n’ont pas d’équivalent dans l’API des Hooks, mais ces méthodes de cycle de vie sont relativement rares. Si vous le souhaitez, vous devriez pouvoir utiliser les Hooks dans la majorité du nouveau code que vous écrivez.

Même alors que les Hooks étaient en alpha, la communauté React a créé de nombreux exemples et recettes intéressants qui utilisent les Hooks pour de l’animation, des formulaires, des abonnements, l’intégration avec des bibliothèques tierces, etc. Nous aimons les Hooks car ils facilitent la réutilisation de code, simplifient l’écriture de composants et ouvrent la voie à de super expériences utilisateurs. Nous avons hâte de voir ce que vous allez créer avec !

Tester les Hooks

Nous avons ajouté dans cette version une nouvelle API appelée ReactTestUtils.act(). Elle s’assure que le comportement de vos tests est au plus près de celui dans un navigateur. Nous vous conseillons d’enrober tout code de rendu ou qui déclenche des mises à jour dans vos composants par des appels à act(). Les bibliothèques de test peuvent aussi enrober leurs API ainsi (par exemple, les fonctions utilitaires render et fireEvent de react-testing-library le font).

Ainsi, l’exemple de compteur sur cette page peut être testé comme suit :

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';import Counter from './Counter';

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

it('peut s’afficher et mettre à jour un compteur', () => {
  // Teste le premier rendu et l’effet
  act(() => {    ReactDOM.render(<Counter />, container);  });  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('Vous avez cliqué 0 fois');
  expect(document.title).toBe('Vous avez cliqué 0 fois');

  // Teste le deuxième rendu et l’effet
  act(() => {    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('Vous avez cliqué 1 fois');
  expect(document.title).toBe('Vous avez cliqué 1 fois');
});

Les appels à act() traitent l’ensemble des effets déclenchés en leur sein.

Si vous avez besoin de tester un Hook personnalisé, c’est possible en créant un composant dans votre test, pour ensuite utiliser le Hook dans ce composant. Il ne vous reste plus qu’à tester le composant lui-même.

Afin de réduire ce type de code générique, nous vous conseillons d’utiliser react-testing-library, conçue pour vous encourager à écrire des tests exploitant vos composants d’une façon similaire à vos utilisateurs finaux.

Remerciements

Nous aimerions remercier toutes les personnes qui ont commenté la RFC des Hooks, pour nous avoir fait part de leurs retours. Nous avons lu tous vos commentaires et procédé à quelques ajustements de l’API finale suite à ça.

Installation

React

React v16.8.0 est disponible sur npm.

Pour installer React 16 avec Yarn, exécutez :

yarn add react@^16.8.0 react-dom@^16.8.0

Pour installer React 16 avec npm, exécutez :

npm install --save react@^16.8.0 react-dom@^16.8.0

Nous fournissons aussi des builds UMD de React via un CDN :

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Référez-vous à la documentation pour des instructions détaillées d’installation.

Plugin ESLint pour les Hooks React

Remarque

Comme indiqué précédemment, nous vous conseillons fortement d’utiliser la règle de linting dédiée eslint-plugin-react-hooks.

Si vous utilisez Create React App, au lieu de configurer ESLint manuellement vous pouvez attendre la prochaine version de react-scripts, qui va sortir sous peu : elle inclura automatiquement cette règle.

En supposant que vous avez déjà installé ESLint, exécutez :

# npm
npm install eslint-plugin-react-hooks --save-dev

# yarn
yarn add eslint-plugin-react-hooks --dev

Puis ajoutez-le à votre configuration ESLint :

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"
  }
}

Changelog

React

• Ajoute les Hooks — une façon d’utiliser l’état local et d’autres fonctionnalités de React sans avoir à écrire une classe. (@acdlite et d’autres dans #13968)
• Améliore l’API d’initialisation paresseuse du Hook useReducer. (@acdlite dans #14723)

React DOM

• Évite un rendu superflu pour des valeurs identiques des Hooks useState et useReducer. (@acdlite dans #14569)
• Ne compare plus le premier argument passé aux Hooks useEffect/useMemo/useCallback. (@acdlite dans #14594)
• Utilise l’algorithme Object.is pour comparer les valeurs de useState et useReducer. (@Jessidhia dans #14752)
• Prend en charge les thenables synchrones passés à React.lazy(). (@gaearon dans #14626)
• Affiche les composants dotés de Hooks deux fois en mode strict (DEV seulement) par cohérence avec les classes. (@gaearon dans #14654)
• Avertit en développement si l’ordre des Hooks varie. (@threepointone dans #14585 et @acdlite dans #14591)
• Les fonctions de nettoyage des effets doivent renvoyer soit undefined soit une fonction. Toutes les autres valeurs, dont null, sont interdites. @acdlite dans #14119

React Test Renderer

• Prend en charge les Hooks dans le moteur de rendu superficiel. (@trueadm dans #14567)
• Corrige l’état incorrect dans shouldComponentUpdate, si getDerivedStateFromProps est définie, au sein du moteur de rendu superficiel. (@chenesan dans #14613)
• Ajoute ReactTestRenderer.act() et ReactTestUtils.act() pour traiter les mises à jour par lots afin que les tests reflètent davantage le comportement réel. (@threepointone dans #14744)

Plugin ESLint : React Hooks

• Version initiale. (@calebmer dans #13968)
• Corrige les rapports après constatation d’une boucle. (@calebmer et @Yurickh dans #14661)
• Ne considère pas une levée d’exception comme une violation de règle. (@sophiebits dans #14040)

Changelog des Hooks depuis les versions alpha

Le changelog ci-avant contient toutes les modifications notables depuis notre dernière version stable (16.7.0). Comme pour toutes nos versions mineures, rien là-dedans ne rompt la compatibilité ascendante.

Si vous utilisez actuellement les Hooks d’une version alpha de React, remarquez que cette version contient quelques ruptures concernant les Hooks. Nous déconseillons l’utilisation des alphas dans du code de production. Nous publions ces versions pour pouvoir ajuster notre API en réponse aux retours de la communauté, avant que l’API ne soit finalisée.

Voici les modifications de rupture concernant les Hooks qui ont eu lieu depuis la première version alpha :

• Retire useMutationEffect. (@sophiebits dans #14336)
• Renomme useImperativeMethods en useImperativeHandle. (@threepointone dans #14565)
• Évite un rendu superflu pour des valeurs identiques des Hooks useState et useReducer. (@acdlite dans #14569)
• Ne compare plus le premier argument passé aux Hooks useEffect/useMemo/useCallback. (@acdlite dans #14594)
• Utilise l’algorithme Object.is pour comparer les valeurs de useState et useReducer. (@Jessidhia dans #14752)
• Affiche les composants dotés de Hooks deux fois en mode strict (DEV seulement) par cohérence avec les classes. (@gaearon dans #14654)
• Améliore l’API d’initialisation paresseuse du Hook useReducer. (@acdlite dans #14723)