Réutiliser Logic dans React avec des Hooks personnalisés : un guide pratique

Les hooks personnalisés sont une fonctionnalité puissante de React qui sont utilisés à des fins plus spécifiques contrairement aux hooks intégrés de React, et cela se fait en encapsulant des fonctionnalités communes dans des fonctions indépendantes. les hooks personnalisés favorisent la réutilisation, améliorent l'organisation des composants et améliorent globalement la maintenabilité du code.

Dans ce guide, nous plongerons dans les objectifs de l'utilisation d'un hook personnalisé, en comprenant les principes fondamentaux de la création d'un hook personnalisé et comment l'utiliser avec d'autres composants. nous illustrerons ensuite un exemple concret en créant un hook personnalisé d'API de récupération.

Comprendre les bases

généralement, les développeurs ont peur du terme hooks personnalisés, alors démystifions-le.

un hook personnalisé est simplement une fonction qui commence par le préfixe use (qui est crucial pour le fonctionnement des hooks personnalisés).
cette fonction consiste en une logique réutilisable qui utilise les hooks intégrés de React. vous envisagez généralement d'utiliser un hook personnalisé si vous avez la même logique sur plusieurs composants. Ainsi, en utilisant des hooks personnalisés, vous pouvez résoudre plusieurs problèmes tels que l'amélioration de l'organisation et de la maintenabilité du code.

Création d'un simple hook personnalisé

L'exemple ci-dessous est un simple hook personnalisé de compteur qui gère l'état du décompte à l'aide du hook useState et met à jour le décompte respectivement à l'aide de fonctions d'incrémentation ou de décrémentation qui définissent uniquement l'état du décompte.

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev + 1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

félicitations, vous venez de créer vos propres crochets personnalisés, c'est assez simple. nous verrons ensuite comment utiliser ce crochet

Utilisation de hooks personnalisés dans les composants

L'utilisation de hooks personnalisés dans d'autres composants se fait simplement en détruisant les valeurs renvoyées par le hook personnalisé à l'intérieur d'autres composants

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    <div>{ count }</div>
    <button onClick={increment}> + </button>
    <button onClick={decrement}> - </button>
  )
}

export default Page

Exemple concret d'utilisation d'un hook personnalisé

l'une des logiques les plus répétitives est de récupérer une API : un site de commerce électronique récupérera les données pour l'authentification, le processus de paiement, l'affichage de tous les produits, commentaires, avis... etc.

vous pouvez imaginer la quantité de logique de récupération répétitive dans l'application qui peut être simplifiée à l'aide d'un hook personnalisé.

dans cette section, nous créerons un hook de récupération personnalisé.

nous utiliserons les hooks React intégrés useState et useEffect
nous allons avoir un état pour les données, un état en attente au cas où nous voudrions afficher un spinner pendant la récupération des données et un état d'erreur en cas d'échec de la récupération.

le code ci-dessous est explicite. dans useEffect, nous définissons une fonction fetchData qui est asynchrone et qui gérera la logique de récupération. sous useEffect, le hook personnalisé renverra les valeurs suivantes qui peuvent être utilisées dans toutes les autres données de composants, en attente, erreur.

notez que nous transmettons une valeur d'url au paramètre de hook personnalisé useFetch, ce qui signifie que les données peuvent être transmises à des hooks personnalisés

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState<any>([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

en utilisant le hook useFetch dans les composants de la page, nous pouvons désormais afficher un message au client en cas d'erreur, afficher un spinner pendant la récupération des données et enfin afficher les données au client.

ce composant peut être utilisé à plusieurs reprises dans toute l'application, ce qui diminue la quantité de code répétitif.

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) <div>Cloud not fetch data from the server</div>

  return(
    {pending ? 
     ( <Spinner />)
     :
     (
      data.map((item) => (
        <div>
          <h3>{item.title}</h3>  
          <p>{item.body}</div>
        </div>
       )
      )
    )}
  )
}

export default Page;

Conclusion

Les hooks personnalisés offrent un mécanisme puissant pour encapsuler et réutiliser la logique dans les composants React. En extrayant des fonctionnalités communes dans des fonctions dédiées, vous pouvez améliorer l'organisation du code, améliorer la maintenabilité et promouvoir la réutilisation du code.

Nous avons exploré les principes fondamentaux de la création de hooks personnalisés, compris comment les utiliser dans les composants React et montré un exemple concret d'utilisation d'un hook personnalisé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!