les hooks de réaction réagissent aux hooks personnalisés appel d’API fonctionnalité de réaction réutilisable

Introduction

Les Hooks personnalisés sont des fonctions réutilisables qui permettent à un développeur React JS d’adapter et d’ajuster les fonctionnalités d’une application React. React JS version 16.8 les inclut.

Une fonction JavaScript spéciale avec le préfixe « use » est appelée «Crochets personnalisés.»

À l’aide d’un Hook personnalisé, récupérez les informations d’une API. Ce hook renverra un objet avec les données et un message d’erreur facultatif étant donné une URL. Ce Hook peut ensuite être utilisé dans un composant.

Avantage des crochets personnalisés

Réutilisabilité du code : Les Hooks personnalisés permettent la réutilisation de la logique sur plusieurs composants.

Abstraction logique complexe: la création de Hooks personnalisés pour résumer une logique complexe améliore la lisibilité du code et aide les composants à rester concentrés sur leurs tâches désignées.

Logique avec état en dehors des composants : à l’aide de Hooks personnalisés, nous gérons la logique en dehors des composants pour partager la logique avec d’autres composants.

La plupart des applications que nous créons aujourd’hui consomment des données provenant de sources externes via des API. Ils récupèrent les données du serveur et les affichent dans leur front-end.

Premiers pas avec Custom Hook dans React

Installation

Étape 1 : Création de l’application React

npx create-react-app custom-react-hook

cd custom-react-hook

npm start

Étape 2: Créez un nouveau fichier appelé useFetch.js

Dans ce fichier, créez une fonction appelée useFetch() qui accepte une chaîne URL comme paramètre.

Ce Hook doit effectuer l’appel d’API immédiatement après son appel. Vous pouvez donc utiliser le hook useEffect() pour cela.

Pour les appels d’API réels, utilisez l’API fetch. Cette API est une interface basée sur des promesses qui vous permet d’effectuer des requêtes et de recevoir des réponses via HTTP de manière asynchrone.

Dans le Hook personnalisé useFetch(). Ajoutez ce qui suit.

import { useEffect, useState } from "react";

const useFetch = (url) => {
    const [data, setdata] = useState(null);
    const [loading, setloading] = useState(true);
    const [error, seterror] = useState("");

    useEffect(() => {
        fetch(url)
            .then((res) => res.json())
            .then((data) => {
                setdata(data)
                setloading(false)
                seterror(data.error)
            })
    }, [url]);

    return { data, loading, error };
};

export default useFetch;

Dans ce Hook, vous pouvez initialiser l’état de trois valeurs :

• données: maintenir la réponse de l’API
• chargement: contient une valeur booléenne qui indique s’il a récupéré les données de l’API. Initialisez l’état de chargement sur true. Une fois que l’API renvoie des données, définissez-les sur false.
• erreur: affiche un message d’erreur si une erreur se produit.

Le hook useEffect() prend la chaîne URL et l’argument. Ceci permet de garantir qu’il s’exécute à chaque fois que l’URL change.

maintenant, nous créons un composant avec le nom de fichier product-list.js pour afficher la liste de produits à l’aide de l’API

liste de produits Afficher sous forme de tableau afin que nous créions un tableau. Et en utilisant la méthode map(), nous destructons l’objet tableau et l’affichons.

La fonction useEffect() renverra un objet contenant les valeurs de données, de chargement et d’erreur. ajouter utiliserFetch.js déposer dans liste-de-produits.js

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

function ProductList() {
  const { data, loading, error } = useFetch('https://dummyjson.com/products');
  if (loading) return (<div>loading...</div>)
  if (error) return (<div>error:{error.message}</div>)

  return (
    <>
      <table>
        <thead>
          <tr>
            <td></td>
            <td>Product Name</td>
            <td>Price</td>
            <td>Brand</td>
          </tr>
        </thead>
        {data.products.map((item, i) => (
          <tr key={i}>
            <td>
              <img src={item.images[0]} className="image-name" alt="product" />
            </td>
            <td>{item.title}</td>
            <td>{item.price}</td>
            <td>{item.brand}</td>
          </tr>
        ))}
      </table>
    </>
  )
}
export default ProductList

De même, si vous souhaitez obtenir des données d’une autre API pour un autre composant à ce moment-là, vous pouvez également importer utiliserFetch.js fichier vers un autre composant et transmettre l’URL

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

function ProductCategories() {
  const { data, loading, error } = useFetch('https://api.escuelajs.co/api/v1/categories');
  if (loading) return (<div>loading...</div>)
  if (error) return (<div>error:{error.message}</div>)
  return (
    <>
      <h1>Products Categories</h1>
      <div style={{ display: 'inline-flex' }}>{data.map((categories, i) => (
        <div key={i}>
          <img src={categories.image} className="image-name" alt="categories" />
          <h5>{categories.name}</h5>
        </div>
      ))}
      </div>
    </>)
}
export default ProductCategories

et importez les deux composants dans App.js

import './App.css';
import ProductCategories from './components/product-categories';
import ProductList from './components/product-list';
function App() {
  return (
    <div className="App">
      <ProductCategories/>
      <ProductList />
    </div>
  );
}
export default App;

Structure des dossiers :

Résultat : sur http://localhost:3000

Conclusion:

Avec Hook personnalisé, vous pouvez créer une logique partagée et réutilisable. Vous pouvez créer des composants plus efficaces, modulaires et maintenables en encourageant une logique complexe. Essayez d’incorporer Hook personnalisé dans votre projet pour constater l’expérience de développement améliorée qu’ils offrent.