React et les Hooks : Une Révolution dans la Gestion du State

Salut tout le monde!

Les hooks ont transformé React et simplifié la gestion du state. Avant, les composants de classe étaient incontournables, mais avec useState et useEffect, on peut tout faire avec des fonctions.

Pourquoi les Hooks ?

Les hooks évitent d’avoir des classes trop complexes et permettent de réutiliser la logique entre plusieurs composants. Ils apportent aussi plus de flexibilité et de lisibilité au code. De plus, ils permettent de mieux organiser le code en évitant la duplication et en facilitant la séparation des responsabilités.

Quelques Hooks Essentiels

• useState : Gère l’état local.
• useEffect : Exécute du code après le rendu, utile pour les effets de bord (API calls, timers...).
• useContext : Partage des valeurs globales sans prop drilling.
• useReducer : Alternative avancée à useState pour des mises à jour plus complexes.
• useRef : Permet d’accéder à des éléments du DOM ou de stocker une valeur persistante sans déclencher de re-render.
• useMemo et useCallback : Optimisent la performance en évitant des calculs et créations de fonctions inutiles.

Détails sur useMemo et useCallback

L’un des problèmes fréquents en React est le re-rendering inutile des composants. Pour éviter cela, on utilise useMemo et useCallback.

• Explication de useMemo : Il sert à optimiser les performances en évitant de recalculer une valeur à chaque rendu du composant, sauf si les dépendances changent. Cela est particulièrement utile pour des calculs lourds ou des opérations coûteuses.

import { useState, useMemo } from 'react';

function ExpensiveCalculation({ num }) {
  const carre= useMemo(() => {
    console.log("Calcul en cours...");
    return num * num;
  }, [num]);

  return <p>Le carré de {num} est {carre}</p>;
}

Dans cet exemple, useMemo s’assure que la valeur carre n’est recalculée que si num change, ce qui évite de refaire des calculs inutiles.

• Explication de useCallback : Il est utilisé pour mémoriser une fonction afin qu’elle ne soit pas recréée à chaque rendu du composant, ce qui est utile pour éviter des re-renders inutiles.

import { useState, useCallback } from 'react';

function Button({ onClick }) {
  return <button onClick={onClick}>Aller Clique ici</button>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => setCount(count + 1), [count]);

  return (
    <div>
      <p>Compteur : {count}</p>
      <Button onClick={handleClick} />
    </div>
  );
}

Ici, useCallback empêche la recréation de handleClick à chaque re-render du composant ParentComponent, améliorant ainsi les performances.

Un exemple pratique avec useEffect

useEffect est un hook essentiel en React qui permet d’exécuter des effets de bord, comme des appels API, en fonction des changements d’état ou de props.

import { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  return <div>{data ? data.title : 'Chargement...'}</div>;
}

Dans cet exemple, useEffect effectue une requête API dès le montage du composant (grâce au tableau de dépendances [] qui est vide). Cela garantit que la requête ne s’exécute qu’une seule fois.

Mon ressenti

• J’aime la simplicité des hooks, qui remplacent des classes souvent trop complexes.
• useEffect est super utile, mais il faut bien gérer les dépendances pour éviter des boucles infinies.
• useMemo et useCallback sont des outils puissants pour optimiser les performances et éviter des re-renders inutiles.
• useReducer est particulièrement utile pour gérer des états complexes et éviter d’avoir trop d’appels setState.

Références

• React Hooks Tutorial https://www.robinwieruch.de/react-hooks/ (page consultée le 21 février 2025)

• React Hook Tutorial with State and Component Lifecycle Management - YouTube https://www.youtube.com/watch?v=AFzLarIcHgE (page consultée le 21 février 2025)