Réagissez, il faut parler d'États dérivés !

Lorsque vous travaillez avec React, vous rencontrerez souvent des situations dans lesquelles vous devez transformer ou dériver des valeurs basées sur d'autres états ou accessoires. Ce concept est connu sous le nom d'état dérivé, et c'est l'un des outils les plus puissants de votre boîte à outils React, s'il est utilisé correctement.

« État dérivé : l'état qui peut être calculé à partir d'un élément d'état ou d'un accessoire existant est appelé état dérivé. »

Alors, plongeons-nous dedans et amusons-nous un peu pendant que nous y sommes.

La mauvaise pratique : filtrer la liste de produits

Commençons par un exemple typique « oups, je n’ai pas réfléchi à cela ». Imaginez que nous ayons une liste de produits et que nous souhaitions les filtrer en fonction de ce que l'utilisateur saisit dans une entrée de recherche. Dans un monde idéal, notre recherche devrait se mettre à jour de manière dynamique et être extrêmement rapide. Mais jetons d’abord un coup d’œil rapide à l’approche des mauvaises pratiques.

Voici comment nous ne devrions pas gérer les choses :

import React, { useState } from 'react';

const ProductList = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [products, setProducts] = useState([
    { id: 1, name: 'Laptop' },
    { id: 2, name: 'Smartphone' },
    { id: 3, name: 'Headphones' },
    { id: 4, name: 'Smartwatch' },
  ]);
  const [filteredProducts, setFilteredProducts] = useState(products);

  const handleSearch = (e) => {
    const query = e.target.value;
    setSearchQuery(query);
    setFilteredProducts(
      products.filter(product =>
        product.name.toLowerCase().includes(query.toLowerCase())
      )
    );
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={handleSearch}
        placeholder="Search for a product"
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

Pourquoi est-ce une mauvaise pratique ?

On dirait que ça marche, non ? L'entrée de recherche est connectée et filtre les produits comme prévu.

Mais voici le problème : nous stockons les produits filtrés dans un état distinct. Cela entraîne une duplication inutile des données. Nous avons déjà des produits dans un état et nous stockons le résultat de l'opération de filtrage dans un autre état, ce qui entraîne des bugs potentiels, une utilisation accrue de la mémoire et rend plus difficile la synchronisation de tout.

En gros, nous rendons les choses plus compliquées qu’elles ne devraient l’être.

La bonne pratique : utiliser l'état dérivé

Maintenant, appliquons un peu de sagesse React et corrigeons le code ci-dessus en utilisant état dérivé.

Cette fois, au lieu de conserver deux variables d'état distinctes (products et filteredProducts), nous dériverons les produits filtrés directement du tableau products en fonction de la requête de recherche. De cette façon, nous évitons la redondance et gardons notre état propre.

Voici la version améliorée :

import React, { useState } from 'react';

const ProductList = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const products = [
    { id: 1, name: 'Laptop' },
    { id: 2, name: 'Smartphone' },
    { id: 3, name: 'Headphones' },
    { id: 4, name: 'Smartwatch' },
  ];

  // Derived state: filter products based on the search query
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const handleSearch = (e) => {
    setSearchQuery(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={handleSearch}
        placeholder="Search for a product"
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

Quelle est l’amélioration ?

1. Aucun état supplémentaire pour les produits filtrés : Nous ne stockons plus de liste séparée de produits filtrés. Au lieu de cela, nous calculons directement la liste filtrée à partir du tableau products et de la requête de recherche à chaque rendu.
2. Code plus propre : Le composant est plus simple, avec moins d'états à gérer. Cela facilite la lecture et la maintenance.
3. Augmentation des performances (en quelque sorte) : React n'a pas besoin de suivre des variables d'état supplémentaires. Il dérive simplement la liste filtrée directement à partir des données existantes, ce qui rend le code plus simple et plus rapide (même si React optimise les mises à jour, moins de changements d'état sont toujours mieux).

Cette approche tire parti de l'état dérivé, dans lequel les produits filtrés sont calculés à partir des données existantes, au lieu de stocker une copie supplémentaire des données filtrées.

Quand ne pas utiliser l’état dérivé

Bien que l’état dérivé soit souvent le meilleur choix, ce n’est pas la solution miracle pour tout. Si votre composant traite des calculs ou des états complexes nécessaires dans plusieurs parties de l'application, il peut être préférable d'utiliser la mémoisation ou de stocker cet état dérivé dans un composant ou un contexte de niveau supérieur.

Mais pour un simple filtrage, un tri ou d'autres valeurs dérivées légères, l'exemple ci-dessus devrait être votre approche privilégiée.

Conclusion

Pour résumer, l'état dérivé dans React consiste à garder les choses AU SEC—ne vous répétez pas. Au lieu de conserver des copies inutiles des mêmes données dans l'état, calculez les valeurs à la volée en fonction de l'état et des accessoires existants. Cela conduit à un code plus propre, plus efficace et plus facile à maintenir. Ainsi, la prochaine fois que vous serez tenté de dupliquer des données dans React, demandez-vous si vous pouvez les calculer directement à partir d’autres sources. Votre futur moi vous remerciera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!