Crochets de réaction

Des crochets ont été ajoutés à React dans la version 16.8.

Les crochets permettent aux composants fonctionnels d'avoir accès à l'état et à d'autres fonctionnalités de React. De ce fait, les composants de classe ne sont généralement plus nécessaires.

Qu'est-ce qu'un crochet ?

Les hooks nous permettent de "s'accrocher" aux fonctionnalités de React telles que les méthodes d'état et de cycle de vie.

import React, { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Vous devez importcrochets de react.

Ici, nous utilisons le useStatecrochet pour suivre l'état de l'application.

L'état fait généralement référence aux données d'application ou aux propriétés qui doivent être suivies.

Règles de crochet

Il y a 3 règles pour les hooks :

• Les crochets ne peuvent être appelés qu'à l'intérieur des composants de la fonction React.
• Les crochets ne peuvent être appelés qu'au niveau supérieur d'un composant.
• Les crochets ne peuvent pas être conditionnels

Crochets personnalisés

Si vous avez une logique avec état qui doit être réutilisée dans plusieurs composants, vous pouvez créer vos propres crochets personnalisés.

Nous reviendrons plus en détail dans la section Custom Hooks .