les Hooks : Une Approche pour la Gestion de l’État et de la Logique

React est l’une des bibliothèques JavaScript les plus populaires pour la construction d’interfaces utilisateur interactives et dynamiques. Avec l’introduction des « Hooks » dans React 16.8, le processus de gestion de l’état et de la logique dans les composants a été radicalement simplifié et amélioré. Nous explorerons les bases, le côté technique et la mise en pratique des Hooks les plus couramment utilisés dans React, à savoir useState, useMemo, useCallback, useEffect, useReducer, et les Hooks personnalisés. Chaque catégorie de Hook sera expliquée en détail avec des définitions et des exemples concrets pour faciliter la compréhension.

1. useState

Le Hook useState permet aux composants fonctionnels de React de déclarer et de gérer leur propre état local. Il s’agit d’une alternative aux états gérés par les classes et utilise la déstructuration pour renvoyer deux éléments : la valeur de l’état et une fonction pour la mettre à jour.

Exemple d’utilisation :

import React, { useState } from 'react';

const Counter = () => { 
  const [count, setCount] = useState(0); 
  const increment = () => setCount(count + 1);

return (
  <div> 
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button> 
  </div>
  );
};

2. useMemo

Le Hook useMemo permet de mémoriser le résultat d’un calcul, évitant ainsi de le recalculer à chaque rendu, ce qui améliore les performances de l’application en évitant les opérations coûteuses.

Exemple d’utilisation :

import React, { useState, useMemo } from 'react'; 

const ExpensiveComponent = () => { 
  const [number, setNumber] = useState(1);

  const expensiveCalculation = useMemo(() => { 
    console.log("Expensive calculation performed!"); 
    return number * 10;
  }, [number]);

return ( 
  <div>
    <p>Result: {expensiveCalculation}</p> 
    <button onClick={() => setNumber(number + 1)}>Increment Number</button>
  </div> 
  ); 
};

3. useCallback

Le Hook useCallback permet de mémoriser une fonction pour qu’elle ne soit pas recréée à chaque rendu du composant parent, utile pour optimiser les performances en évitant les rappels inutiles.

Exemple d’utilisation :

import React, { useState, useCallback } from 'react';

  const Counter = () => { 
    const [count, setCount] = useState(0); 
  
    const increment = useCallback(() => {
      setCount((prevCount) => prevCount + 1);
    }, []);

  return ( 
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div> 
  ); 
};

4. useEffect

Le Hook useEffect permet d’effectuer des effets de bord dans les composants fonctionnels, comme des appels à des API externes, des abonnements, ou des modifications du DOM. Il s’exécute après chaque rendu et peut être nettoyé lorsqu’il est nécessaire.

Exemple d’utilisation :

import React, { useState, useEffect } from 'react'; 

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

  useEffect(() => {
    // Appel à une API pour récupérer des données
    fetchData().then((result) => setData(result));
  }, []);

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

5. useReducer

Le Hook useReducer permet de gérer des états complexes en utilisant le concept de réduction (comme dans Redux). Il est utile lorsque le composant a un état qui dépend de l’état précédent, et que les mises à jour sont plus complexes qu’avec useState.

Exemple d’utilisation :

import React, { useReducer } from 'react';

const initialState = { count: 0 }; 
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
    } 
  };

const Counter = () => { 
  const [state, dispatch] = useReducer(reducer, initialState); 

return (
  <div>
    <p>Count: {state.count}</p>
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
  </div>
  );
};

6. Hooks Personnalisés

Les Hooks personnalisés sont des fonctions personnalisées qui utilisent d’autres Hooks pour faciliter la réutilisation de la logique entre différents composants. Ils permettent d’abstraire la logique complexe et de la rendre plus facilement accessible.

Exemple d’utilisation :

// Custom Hook
import { useState } from 'react';

const useCustomCounter = (initialValue) => { 
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1); 

  return { count, increment, decrement };
};

// Utilisation du Custom Hook

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

const Counter = () => { 
  const { count, increment, decrement } = useCustomCounter(0);

return ( 
  <div>
    <p>Count: {count}</p> 
    <button onClick={increment}>Increment</button> 
    <button onClick={decrement}>Decrement</button>
  </div> 
);
};

Conclusion

Les Hooks sont une innovation majeure dans le monde de React, permettant aux développeurs de gérer plus facilement l’état et la logique dans les composants fonctionnels. Les Hooks tels que useState, useMemo, useCallback, useEffect, useReducer, et les Hooks personnalisés fournissent des outils puissants pour créer des composants réutilisables et performants. En les utilisant à bon escient, les développeurs peuvent améliorer la maintenabilité et les performances de leurs applications React. N’hésitez pas à les essayer dans vos projets et à explorer d’autres Hooks pour tirer le meilleur parti de React !

React hooks : lien supplémentaire