Introduction à React Hooks

 

Qu'est-ce que React Hooks ?

React Hooks, introduits dans la version 16.8 de React, sont des fonctions qui vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classes. Ils simplifient la gestion de l'état et les effets secondaires dans les composants fonctionnels, rendant le code plus lisible et maintenable.

Pourquoi utiliser des Hooks ?

• Code plus propre et plus lisible : Les composants fonctionnels sont généralement plus simples et plus concis que les composants basés sur des classes.
• Réutilisation de la logique d'état : Les hooks permettent de réutiliser la logique d'état entre différents composants sans changer leur structure.
• Facilité de tests : Les fonctions pures sont plus faciles à tester que les classes.

Les Hooks de base

useState

useState est le hook le plus simple et le plus couramment utilisé. Il permet d'ajouter un état local à un composant fonctionnel.

Exemple : 

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>
        Cliquez ici
      </button>
    </div>
  );
}

Dans cet exemple, useState initialise count à 0 et fournit une fonction setCount pour mettre à jour cet état.

useEffect

useEffect est utilisé pour les effets secondaires dans les composants fonctionnels, comme les appels d'API, les abonnements, ou les modifications du DOM.

Exemple :

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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <div>Temps écoulé : {count} secondes</div>;
}

Dans cet exemple, useEffect met en place un intervalle qui incrémente count chaque seconde. L'effet est nettoyé lorsque le composant est démonté en retournant une fonction de nettoyage.

Autres Hooks Utiles

useContext

useContext permet d'utiliser le contexte React dans un composant fonctionnel.

Exemple :

import React, { useContext } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

function App() {
  return (
    <MyContext.Provider value="voici le message !">
      <MyComponent />
    </MyContext.Provider>
  );
}

Ce code montre comment partager une donnée (comme un message) entre différents composants sans avoir à la passer manuellement à chaque niveau. On crée un contexte, on fournit une valeur à ce contexte avec Provider, et les composants enfants peuvent accéder à cette valeur avec useContext.

useReducer

useReducer est utilisé pour la gestion d'état complexe, offrant une alternative à useState.

Exemple :

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

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

  return (
    <div>
      <p>Compteur : {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

Dans cet exemple , la fonction  reducer est utiliser et  elle  prend l'état actuel (state) et une action (action), et retourne un nouvel état basé sur le type de l'action.

• case 'increment' : Si l'action est de type increment, le compteur est incrémenté de 1.
• case 'decrement' : Si l'action est de type decrement, le compteur est décrémenté de 1.
• default : Si l'action n'est pas reconnue, une erreur est lancée.

Conclusion

Les React Hooks ont révolutionné la manière dont les développeurs construisent des composants avec état dans React. useState et useEffect sont les hooks les plus basiques et les plus utilisés, mais il en existe d'autres comme useContext , useReducer,useCallback,useMemo,useRef,useLayoutEffect qui sont tout aussi puissants pour des cas d'utilisation spécifiques. En utilisant les hooks, vous pouvez écrire du code plus propre, plus réutilisable et plus facile à tester.

Les hooks ne remplacent pas complètement les classes, mais ils offrent une alternative plus flexible et souvent plus intuitive pour gérer l'état et les effets secondaires dans les composants fonctionnels.