Réagissez aux crochets personnalisés

Les crochets sont des fonctions réutilisables.

Lorsque vous avez une logique de composant qui doit être utilisée par plusieurs composants, nous pouvons extraire cette logique dans un Hook personnalisé.

Les Hooks personnalisés commencent par "use". Exemple : useFetch.

Construire un crochet

Dans le code suivant, nous récupérons des données dans notre Homecomposant et les affichons.

Nous utiliserons le service JSONPlaceholder pour récupérer de fausses données. Ce service est idéal pour tester des applications lorsqu'il n'y a pas de données existantes.

Pour en savoir plus, consultez la section JavaScript Fetch API .

Utilisez le service JSONPlaceholder pour récupérer de faux éléments "à faire" et afficher les titres sur la page :

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

const Home = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

La logique de récupération peut également être nécessaire dans d'autres composants, nous allons donc l'extraire dans un Hook personnalisé.

Déplacez la logique de récupération vers un nouveau fichier à utiliser comme crochet personnalisé :

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

import ReactDOM from "react-dom";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

Exemple expliqué

Nous avons créé un nouveau fichier appelé useFetch.jscontenant une fonction appelée useFetchqui contient toute la logique nécessaire pour récupérer nos données.

Nous avons supprimé l'URL codée en dur et l'avons remplacée par une urlvariable pouvant être transmise au Hook personnalisé.

Enfin, nous renvoyons nos données depuis notre Hook.

Dans index.js, nous importons notre useFetchcrochet et l'utilisons comme n'importe quel autre crochet. C'est là que nous transmettons l'URL pour récupérer les données.

Nous pouvons maintenant réutiliser ce crochet personnalisé dans n'importe quel composant pour récupérer des données à partir de n'importe quelle URL.