React の useEffect フックの簡素化: プロのようにサイドエフェクトを管理

Comprendre useEffect dans React : de zéro à héros

React est devenue l'une des bibliothèques JavaScript les plus populaires pour créer des interfaces utilisateur dynamiques. L'un des hooks les plus cruciaux de React est useEffect, qui permet aux développeurs de gérer les effets secondaires dans les composants fonctionnels. Les effets secondaires incluent des opérations telles que la récupération de données, la configuration d'abonnements ou la manipulation manuelle du DOM. Dans ce blog, nous approfondirons ce qu'est useEffect, comment il fonctionne et fournirons des exemples étape par étape pour une meilleure compréhension.

Qu’est-ce que useEffect ?

Dans React, useEffect est un hook intégré qui vous permet d'effectuer des effets secondaires dans les composants de fonction. Les effets secondaires, comme leur nom l'indique, sont des opérations qui affectent quelque chose en dehors de la fonction, comme les appels d'API, les minuteries, la journalisation ou la mise à jour du DOM.

Avant l'introduction des hooks dans React 16.8, vous deviez utiliser des composants de classe et des méthodes de cycle de vie telles que composantDidMount, composantDidUpdate et composantWillUnmount pour gérer les effets secondaires. Désormais, avec useEffect, ces événements du cycle de vie sont combinés en une seule fonction pour les composants fonctionnels.

Pourquoi choisir useEffect ?

useEffect est un hook puissant pour gérer les effets secondaires dans React pour plusieurs raisons :

1. Simplification du code : Il élimine le besoin de composants basés sur les classes et de méthodes de cycle de vie, vous permettant d'écrire un code plus propre et basé sur les fonctionnalités.
2. Effets secondaires centralisés : Vous pouvez gérer tous les effets secondaires, tels que la récupération de données ou la mise à jour du DOM, en un seul endroit.
3. Lisibilité améliorée : Il rationalise la façon dont les événements du cycle de vie sont gérés, rendant le code plus lisible et moins complexe.
4. Flexibilité : Avec useEffect, vous avez plus de contrôle sur le moment et la fréquence d'exécution des effets secondaires, car vous pouvez définir des dépendances qui déterminent quand l'effet doit s'exécuter.

Comment ça marche ?

Le hook useEffect accepte deux arguments :

1. Fonction d'effet : Cette fonction contient la logique des effets secondaires, comme la récupération de données ou la configuration d'un abonnement.
2. Tableau de dépendances (facultatif) : Un tableau de valeurs qui détermine quand l'effet doit être réexécuté. Si une valeur du tableau de dépendances change, l'effet est à nouveau exécuté. Si vous omettez ce tableau, l'effet s'exécutera après chaque rendu.

Voici une structure de base :

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

Exemple:

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

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

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

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

Dans cet exemple, les données sont récupérées à partir d'une API lors du premier rendu du composant et le résultat est affiché dans l'interface utilisateur. Puisque nous transmettons un tableau de dépendances vide, cet effet ne s'exécute qu'une seule fois après le premier rendu.

Contrôler les effets secondaires lors de l'utilisationEffect

En contrôlant le moment où useEffect s'exécute, nous pouvons optimiser les performances et garantir que les effets secondaires se produisent au bon moment.

Effets sans nettoyage

Tous les effets ne nécessitent pas de nettoyage. Le nettoyage n'est nécessaire que lorsque vous devez supprimer ou réinitialiser quelque chose après l'exécution de l'effet, comme effacer les minuteries ou vous désabonner des flux de données.

Par exemple, voici un scénario dans lequel aucun nettoyage n'est nécessaire :

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

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

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Dans ce cas, l'effet s'exécute à chaque fois que l'état du comptage change. Puisque nous ne configurons pas d’abonnements ni ne gérons de ressources externes, aucun nettoyage n’est nécessaire.

Effets avec nettoyage

Si votre effet implique la configuration d'abonnements ou de minuteries, vous devrez probablement nettoyer après l'effet. Par exemple, imaginez un scénario dans lequel nous souhaitons configurer une minuterie :

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

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return <div>{time} seconds have passed</div>;
}

Voici ce qui se passe :

1. La fonction setInterval configure une minuterie qui incrémente le temps chaque seconde.
2. La fonction de nettoyage (renvoyée par useEffect) efface l'intervalle de démontage du composant. Cela garantit que la minuterie ne continue pas à fonctionner après la suppression du composant.

Exemples d'utilisationScénarios d'effets

Explorons quelques scénarios courants dans lesquels useEffect est particulièrement utile.

Récupération de données sur le montage de composants

La récupération de données lors du montage du composant est l'un des cas d'utilisation les plus courants de useEffect.

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

Mise à jour du DOM

Vous pouvez utiliser useEffect pour manipuler manuellement le DOM après le rendu, même si cela doit être fait avec parcimonie puisque React gère le DOM efficacement.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

Nettoyage lors du démontage du composant

Si vous disposez de ressources telles que des abonnements ou des écouteurs d'événements qui doivent être nettoyées, vous pouvez utiliser la fonction de retour dans useEffect pour gérer cela.

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

FAQs

1. What happens if I omit the dependency array in useEffect?

If you omit the dependency array, useEffect will run after every render, which can cause performance issues for expensive side effects like API calls.

2. Can I run useEffect only once?

Yes, passing an empty dependency array [] ensures that the effect runs only once after the component mounts.

3. What is the cleanup function in useEffect?

The cleanup function is a way to undo the effect when the component unmounts or before the effect runs again. It’s useful for cleaning up timers, event listeners, or subscriptions.

---

In conclusion, useEffect is a powerful and flexible hook that simplifies managing side effects in React. By controlling when side effects run and cleaning up when necessary, you can optimize your components and avoid unnecessary re-renders or memory leaks. Experiment with the examples above to master the art of side effect management!

以上がReact の useEffect フックの簡素化: プロのようにサイドエフェクトを管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。