Accueil/Notions/Tableau de dépendances (React)

Tableau de dépendances (React)

Un tableau de dépendances est un concept clé en React, particulièrement utilisé avec les Hooks (React) comme useEffect. Pour bien comprendre cette notion, il est important de savoir pourquoi et comment on l'utilise.

Qu'est-ce qu'un tableau de dépendances ?

Dans React, un tableau de dépendances (dependencies Array) est un argument qu'on passe aux hooks, notamment useEffect, useMemo, et useCallback, pour contrôler quand ces hooks doivent être ré-exécutés.

Pourquoi c'est important ?

Sans tableau de dépendances, un hook comme useEffect s'exécute à chaque rendu du composant. Cela peut entraîner des performances médiocres si le hook effectue des opérations coûteuses. En spécifiant des dépendances, on peut dire à React de n'exécuter le hook que lorsque certaines variables ont changé.

Exemple en TypeScript

Imaginons que tu as un composant qui affiche une liste d'utilisateurs et que tu veux effectuer une action (comme une requête API) lorsque le composant est monté ou lorsque l'ID de l'utilisateur change.

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

type User = {
  id: number;
  name: string;
};

const fetchUser = async (userId: number): Promise<User> => {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const user = await response.json();
  return user;
};

const UserProfile: React.FC<{ userId: number }> = ({ userId }) => {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    // Fonction pour récupérer les données de l'utilisateur
    const getUser = async () => {
      const userData = await fetchUser(userId);
      setUser(userData);
    };

    getUser();
  }, [userId]); // Le tableau de dépendances contient userId

  return (
    <div>
      {user ? (
        <div>
          <h1>{user.name}</h1>
          <p>ID: {user.id}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default UserProfile;

Explications

  1. useEffect : C'est le hook qu'on utilise pour effectuer des effets de bord (side effects), comme des requêtes API, des abonnements, etc.
  2. Tableau de dépendances : [userId]
    • Ici, on indique que l'effet ne doit être exécuté que lorsque userId change.
    • Si userId ne change pas, l'effet ne sera pas ré-exécuté, ce qui permet d'économiser des ressources et d'éviter des opérations inutiles.

Autres exemples de tableaux de dépendances

  1. useMemo : Optimiser le recalcul d'une valeur dérivée.
import React, { useMemo } from 'react';

const ExpensiveComputationComponent: React.FC<{ num: number }> = ({ num }) => {
  const expensiveResult = useMemo(() => {
    // Effectuer une opération coûteuse ici
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }
    return result * num;
  }, [num]); // Recalculer seulement lorsque num change

  return <div>Result: {expensiveResult}</div>;
};
  1. useCallback : Mémoriser une fonction pour éviter des ré-créations inutiles.
import React, { useCallback } from 'react';

const CallbackComponent: React.FC<{ onClick: (id: number) => void }> = ({ onClick }) => {
  const handleClick = useCallback(() => {
    onClick(1); // Appeler onClick avec un ID fictif
  }, [onClick]); // La fonction ne change que si onClick change

  return <button onClick={handleClick}>Click me</button>;
};

En résumé

  • Le tableau de dépendances permet de contrôler quand un hook doit être ré-exécuté.
  • Il aide à optimiser les performances en évitant des exécutions inutiles.
  • Chaque élément dans le tableau représente une dépendance qui, si elle change, déclenchera l'effet ou le calcul associé.

J'espère que cela t'aide à comprendre la notion de tableau de dépendances en React ! Si tu as d'autres questions, n'hésite pas.

Voici une liste de notions à explorer pour approfondir tes connaissances en React et en développement frontend :

1. Hooks avancés

  • useReducer : Gérer des états complexes avec un reducer, similaire à Redux.
  • useContext : Partager des états entre composants sans avoir à passer des props explicitement à chaque niveau.
  • useRef : Accéder directement à un élément DOM ou stocker une valeur persistante qui ne déclenche pas de re-render.

2. Optimisation des performances

  • React.memo : Mémoriser un composant pour éviter les rendus inutiles.
  • useMemo et useCallback : Optimiser les fonctions et les valeurs dérivées.
  • Virtual DOM et Diffing : Comprendre comment React optimise le rendu des composants.

3. Gestion des effets de bord

  • useEffect : Comprendre les différents cycles de vie des composants fonctionnels |composants fonctionnels.
  • useLayoutEffect : Exécuter des effets synchrone après tous les rendus, utile pour les lectures et les écritures dans le DOM.
  • useImperativeHandle : Personnaliser l'instance de référence exposée aux composants parents.

4. Internationalisation (i18n)

  • react-i18next : Une bibliothèque pour l'internationalisation et la gestion des traductions dans React.
  • FormatJS : Gérer l'internationalisation avec des API JavaScript modernes.

server-side-rendering-(ssr)-et-static-site-generation-(ssg)">5. Server-Side Rendering (SSR) et Static Site Generation (SSG)

  • Next.js : Un framework React qui permet le rendu côté serveur et la génération de sites statiques.
  • Gatsby : Un générateur de sites statiques basé sur React.

6. Progressive Web Apps

  • Service Workers : Implémenter des applications web progressives avec des fonctionnalités hors ligne et de push notifications.
  • Workbox : Une bibliothèque pour simplifier le travail avec les service workers.

7. Accessibilité (a11y)

  • React ARIA : Utiliser des composants et des hooks pour créer des expériences accessibles.
  • axe-core : Intégrer des tests d'accessibilité dans ton workflow de développement.

Explorer ces notions te permettra de devenir un développeur React complet et de créer des applications performantes, maintenables et évolutives. Bon apprentissage !