Quand éviter d'utiliser useEffect en React pour optimiser son code

Dans les projets React, on utilise souvent useEffect par réflexe, mais cette approche peut parfois complexifier ton code inutilement. Dans cet article, on va voir des cas où tu n'as pas besoin de useEffect et comment optimiser ton code en évitant d'y recourir à tort.

Comprendre le rôle de useEffect

Le hook useEffect est utile pour gérer des effets secondaires comme des abonnements ou des opérations qui doivent se déclencher en dehors du flux de rendu principal. Cependant, certains cas d'utilisation courants peuvent être simplifiés sans useEffect.

1. Initialiser l'état sans useEffect

Tu veux souvent initialiser un état basé sur des props ou des valeurs initiales au montage du composant. Au lieu d'utiliser useEffect pour définir cet état, tu peux le faire directement avec useState, ce qui rendra ton code plus clair et préviendra des appels inutiles.

Mauvaise pratique avec useEffect :

typescript

Bonne pratique sans useEffect :

Ici, on peut simplement initialiser l’état greeting en utilisant une fonction dans useState :

typescript

Cette approche rend le code plus concis et évite d’ajouter un effet superflu qui pourrait ralentir ton application.

2. Calculer des valeurs dérivées

Si tu as besoin de calculer une valeur en fonction de l’état ou des props, essaie d’utiliser une variable dérivée ou un memo plutôt qu’un useEffect.

Exemple avec useEffect (à éviter) :

typescript

Solution sans useEffect :

Ici, la valeur total peut être calculée directement pendant le rendu, sans dépendre de useEffect :

typescript

Cette méthode est non seulement plus propre, mais elle élimine le besoin de gérer des états supplémentaires.

3. Utiliser useMemo pour des calculs lourds

Pour des calculs coûteux ou dépendants de plusieurs variables, utilise useMemo afin d’éviter de réexécuter la logique à chaque rendu, sans avoir besoin de useEffect pour gérer l'état.

Exemple avec useEffect :

typescript

Approche optimisée avec useMemo :

typescript

Ici, useMemo permet de mémoriser le résultat sans avoir à gérer un effet, ce qui rend le composant plus prévisible et performant.

4. Synchroniser les propriétés d’un composant contrôlé

Pour gérer les entrées contrôlées, tu n’as pas besoin d’utiliser useEffect pour synchroniser les valeurs des inputs avec l'état du composant parent. Utilise simplement les props et les fonctions de rappel pour gérer cet état efficacement.

Exemple avec useEffect (inutile) :

typescript

Solution sans useEffect :

typescript

L’utilisation directe des props simplifie le code et améliore la performance en réduisant le nombre de mises à jour d’état inutiles.

5. Manipuler le DOM directement dans le rendu

Si tu veux appliquer des styles ou des classes basés sur l’état, il est souvent inutile de passer par useEffect. React gère très bien ce type de synchronisation lors du rendu.

Exemple avec useEffect :

typescript

Solution sans useEffect :

typescript

Conclusion

Éviter useEffect permet souvent de simplifier ton code et d'améliorer les performances de ton application React. En réévaluant les raisons d’utiliser un effet, tu pourras créer des composants plus clairs et éviter des erreurs liées à des dépendances mal configurées. La clé est d’identifier les cas où l'état, les valeurs dérivées, ou useMemo suffisent pour répondre à tes besoins sans effets secondaires.

1import { useState, useEffect } from "react";
2
3interface GreetingProps {
4  name: string;
5}
6
7function Greeting({ name }: GreetingProps) {
8  const [greeting, setGreeting] = useState<string>("");
9
10  useEffect(() => {
11    setGreeting(`Hello, ${name}`);
12  }, [name]);
13
14  return <h1>{greeting}</h1>;
15}

1import { useState } from "react";
2
3interface GreetingProps {
4  name: string;
5}
6
7function Greeting({ name }: GreetingProps) {
8  const [greeting] = useState<string>(() => `Hello, ${name}`);
9
10  return <h1>{greeting}</h1>;
11}

1import { useState, useEffect } from "react";
2
3interface CartItem {
4  price: number;
5}
6
7interface CartProps {
8  items: CartItem[];
9}
10
11function Cart({ items }: CartProps) {
12  const [total, setTotal] = useState<number>(0);
13
14  useEffect(() => {
15    setTotal(items.reduce((sum, item) => sum + item.price, 0));
16  }, [items]);
17
18  return <p>Total: ${total}</p>;
19}

1interface CartItem {
2  price: number;
3}
4
5interface CartProps {
6  items: CartItem[];
7}
8
9function Cart({ items }: CartProps) {
10  const total = items.reduce((sum, item) => sum + item.price, 0);
11
12  return <p>Total: ${total}</p>;
13}

1import { useState, useEffect } from "react";
2
3interface ExpensiveCalculationProps {
4  num: number;
5}
6
7function ExpensiveCalculation({ num }: ExpensiveCalculationProps) {
8  const [result, setResult] = useState<number>(0);
9
10  useEffect(() => {
11    const computation = heavyComputation(num);
12    setResult(computation);
13  }, [num]);
14
15  return <p>Result: {result}</p>;
16}
17
18function heavyComputation(num: number): number {
19  // Simule un calcul coûteux
20  return num * 2; // Exemple simplifié
21}

1import { useMemo } from "react";
2
3interface ExpensiveCalculationProps {
4  num: number;
5}
6
7function ExpensiveCalculation({ num }: ExpensiveCalculationProps) {
8  const result = useMemo(() => heavyComputation(num), [num]);
9
10  return <p>Result: {result}</p>;
11}
12
13function heavyComputation(num: number): number {
14  // Simule un calcul coûteux
15  return num * 2; // Exemple simplifié
16}

1import { useState, useEffect } from "react";
2
3interface TextInputProps {
4  value: string;
5  onChange: (value: string) => void;
6}
7
8function TextInput({ value, onChange }: TextInputProps) {
9  const [text, setText] = useState<string>(value);
10
11  useEffect(() => {
12    setText(value);
13  }, [value]);
14
15  return <input value={text} onChange={(e) => onChange(e.target.value)} />;
16}

1interface TextInputProps {
2  value: string;
3  onChange: (value: string) => void;
4}
5
6function TextInput({ value, onChange }: TextInputProps) {
7  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
8}

1import { useState, useEffect } from "react";
2
3interface HighlightedTextProps {
4  isHighlighted: boolean;
5  text: string;
6}
7
8function HighlightedText({ isHighlighted, text }: HighlightedTextProps) {
9  const [className, setClassName] = useState<string>("");
10
11  useEffect(() => {
12    setClassName(isHighlighted ? "highlight" : "");
13  }, [isHighlighted]);
14
15  return <span className={className}>{text}</span>;
16}

1interface HighlightedTextProps {
2  isHighlighted: boolean;
3  text: string;
4}
5
6function HighlightedText({ isHighlighted, text }: HighlightedTextProps) {
7  return <span className={isHighlighted ? "highlight" : ""}>{text}</span>;
8}