Élevez votre jeu React avec des hooks personnalisés : un guide amusant et pratique

Salut, amis passionnés de React ! Si vous êtes comme moi, vous aimez la façon dont React facilite la création d'interfaces utilisateur. Mais parfois, nous nous retrouvons à répéter la même logique entre différents composants. C'est là qu'interviennent les hooks personnalisés : ils sont comme des super pouvoirs secrets qui rendent notre code plus propre et plus efficace. Plongeons dans le monde des hooks personnalisés et voyons comment ils peuvent améliorer notre jeu React.

De toute façon, que sont les crochets ?

Tout d’abord, faisons un bref récapitulatif de ce que sont les crochets. Introduits dans React 16.8, les hooks vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. Certains des hooks intégrés les plus populaires sont useState, useEffect et useContext.

Exemple de crochet intégré

importer React, {useState, useEffect } depuis 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Dans cet exemple simple, useState et useEffect travaillent ensemble pour gérer l'état et les effets secondaires. C’est propre, c’est simple et c’est puissant.

Pourquoi devriez-vous vous soucier des crochets personnalisés ?

Les crochets personnalisés sont axés sur la réutilisation et le maintien de la propreté de vos composants. Ils vous permettent d'extraire et de partager la logique entre les composants. Considérez-les comme votre boîte à outils personnelle, dans laquelle vous pouvez stocker des fonctions pratiques et les utiliser chaque fois que vous en avez besoin.

Avantages des crochets personnalisés

• Réutilisabilité : Écrivez une fois, utilisez partout. Partagez la logique entre différents composants sans dupliquer le code.
• Lisibilité : Gardez vos composants concentrés sur le rendu, ce qui les rend plus faciles à lire et à maintenir.
• Maintenabilité : mise à jour de la logique en un seul endroit, et cela se reflète partout où le hook est utilisé.

Créons ensemble un hook personnalisé

Imaginez que vous ayez plusieurs composants qui doivent récupérer des données à partir d'une API. Au lieu d'écrire la même logique de récupération dans chaque composant, vous pouvez créer un hook personnalisé pour la gérer. Créons useFetch.

Étape par étape : création de useFetch

1. Créer le Hook : Commencez par créer un nouveau fichier nommé useFetch.js.

import { useState, useEffect } from 'react';

    function useFetch(url) {
      const [data, setData] = useState(null);
      const [loading, setLoading] = useState(true);
      const [error, setError] = useState(null);

      useEffect(() => {
        const fetchData = async () => {
          try {
            const response = await fetch(url);
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            const result = await response.json();
            setData(result);
          } catch (error) {
            setError(error);
          } finally {
            setLoading(false);
          }
        };

        fetchData();
      }, [url]);

      return { data, loading, error };
    }

    export default useFetch;

1. Utilisez le Hook : Maintenant, utilisons useFetch dans un composant.

import React from 'react';
    import useFetch from './useFetch';

    function DataFetchingComponent() {
      const { data, loading, error } = useFetch('https://api.example.com/data');

      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error: {error.message}</p>;

      return (
        <div>
          <h1>Data</h1>
          <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}