Optimisation automatique React : adieu mémo, useMemo et useCallback ?

React 19 apporte des améliorations significatives à l'optimisation des performances, notamment dans la façon dont il gère la mémorisation. Explorons comment memo, useMemo et useCallback ont ​​évolué et comment ils sont désormais optimisés par défaut.

L'évolution de la mémorisation dans React

Auparavant, dans React 18, les développeurs devaient soigneusement réfléchir au moment d'utiliser des techniques de mémorisation pour éviter les nouveaux rendus inutiles et optimiser les performances. React 19 change ce paradigme en introduisant des optimisations automatiques qui rendent ces outils plus efficaces et, dans de nombreux cas, inutiles.

mémo dans React 19 : mémorisation plus intelligente des composants

Le mémo de React 19 est désormais beaucoup plus intelligent quant au moment de restituer les composants. Le framework suit automatiquement les modifications apportées aux accessoires et leur impact sur la sortie du composant.

Exemple 1 : comparaison des accessoires de base

// React 18
const UserCard = memo(({ user, onUpdate }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={onUpdate}>Update</button>
    </div>
  );
});

// React 19
// memo is now automatically optimized
const UserCard = ({ user, onUpdate }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={onUpdate}>Update</button>
    </div>
  );
});

Exemple 2 : composants imbriqués

// React 18
const CommentThread = memo(({ comments, onReply }) => {
  return (
    <div>
      {comments.map(comment => (
        <Comment 
          key={comment.id}
          {...comment}
          onReply={onReply}
        />
      ))}
    </div>
  );
});

// React 19
const CommentThread = ({ comments, onReply }) => {
  return (
    <div>
      {comments.map(comment => (
        <Comment 
          key={comment.id}
          {...comment}
          onReply={onReply}
        />
      ))}
    </div>
  );
});

useMemo : mémorisation automatique des valeurs

useMemo de React 19 est désormais optimisé pour détecter automatiquement quand la mémorisation est bénéfique, réduisant ainsi le besoin d'optimisation manuelle.

Exemple 1 : calculs coûteux

// React 18
const ExpensiveChart = ({ data }) => {
  const processedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      value: complexCalculation(item.value)
    }));
  }, [data]);

  return <ChartComponent data={processedData} />;
};

// React 19
const ExpensiveChart = ({ data }) => {
  // React 19 automatically detects expensive operations
  const processedData = data.map(item => ({
    ...item,
    value: complexCalculation(item.value)
  }));

  return <ChartComponent data={processedData} />;
};

Exemple 2 : références d'objets

// React 18
const UserProfile = ({ user }) => {
  const userStyles = useMemo(() => ({
    background: user.premium ? 'gold' : 'silver',
    border: `2px solid ${user.active ? 'green' : 'gray'}`
  }), [user.premium, user.active]);

  return <div>



<h3>
  
  
  Example 3: Derived State
</h3>



<pre class="brush:php;toolbar:false">// React 18
const FilteredList = ({ items, filter }) => {
  const filteredItems = useMemo(() => 
    items.filter(item => item.category === filter),
    [items, filter]
  );

  return <List items={filteredItems} />;
};

// React 19
const FilteredList = ({ items, filter }) => {
  // React 19 automatically optimizes derived state
  const filteredItems = items.filter(item => item.category === filter);
  return <List items={filteredItems} />;
};

useCallback : mémorisation de fonctions plus intelligente

useCallback de React 19 est désormais plus intelligent en matière de stabilité des fonctions et d'égalité des références.

Exemple 1 : gestionnaires d'événements

// React 18
const TodoList = ({ todos, onToggle }) => {
  const handleToggle = useCallback((id) => {
    onToggle(id);
  }, [onToggle]);

  return todos.map(todo => (
    <TodoItem 
      key={todo.id}
      {...todo}
      onToggle={handleToggle}
    />
  ));
};

// React 19
const TodoList = ({ todos, onToggle }) => {
  // React 19 automatically maintains function stability
  const handleToggle = (id) => {
    onToggle(id);
  };

  return todos.map(todo => (
    <TodoItem 
      key={todo.id}
      {...todo}
      onToggle={handleToggle}
    />
  ));
};

Exemple 2 : rappels avec dépendances

// React 18
const SearchComponent = ({ onSearch, searchParams }) => {
  const debouncedSearch = useCallback(
    debounce((term) => {
      onSearch({ ...searchParams, term });
    }, 300),
    [searchParams, onSearch]
  );

  return <input onChange={e => debouncedSearch(e.target.value)} />;
};

// React 19
const SearchComponent = ({ onSearch, searchParams }) => {
  // React 19 handles function stability automatically
  const debouncedSearch = debounce((term) => {
    onSearch({ ...searchParams, term });
  }, 300);

  return <input onChange={e => debouncedSearch(e.target.value)} />;
};

Exemple 3 : Gestion d'événements complexes

// React 18
const DataGrid = ({ data, onSort, onFilter }) => {
  const handleHeaderClick = useCallback((column) => {
    onSort(column);
    onFilter(column);
  }, [onSort, onFilter]);

  return (
    <table>
      <thead>
        {columns.map(column => (
          <th key={column} onClick={() => handleHeaderClick(column)}>
            {column}
          </th>
        ))}
      </thead>
      {/* ... */}
    </table>
  );
};

// React 19
const DataGrid = ({ data, onSort, onFilter }) => {
  // React 19 optimizes function creation and stability
  const handleHeaderClick = (column) => {
    onSort(column);
    onFilter(column);
  };

  return (
    <table>
      <thead>
        {columns.map(column => (
          <th key={column} onClick={() => handleHeaderClick(column)}>
            {column}
          </th>
        ))}
      </thead>
      {/* ... */}
    </table>
  );
};

Principaux avantages des optimisations de React 19

1. Boilerplate réduit : moins besoin de code wrapper de mémorisation explicite
2. Performances automatiques : React gère intelligemment les mises à jour des composants
3. Meilleure expérience développeur : moins de décisions en matière d'optimisation
4. Taille du paquet améliorée : moins de code de mémorisation signifie des paquets plus petits
5. Stabilité automatique : Meilleure gestion de l'égalité de référence
6. Re-rendu intelligent : planification des mises à jour plus efficace

Quand utiliser encore la mémorisation explicite

Bien que les optimisations automatiques de React 19 soient puissantes, il existe encore des cas où la mémorisation explicite peut être bénéfique :

1. Lorsque vous avez des calculs très coûteux dont vous voulez vous assurer qu'ils sont mémorisés
2. Lorsque vous traitez des structures de données complexes où vous souhaitez garantir la stabilité des références
3. Dans les applications critiques en termes de performances où vous avez besoin d'un contrôle précis
4. Lors de l'intégration avec des bibliothèques externes qui attendent des références stables

Conclusion

Les améliorations apportées à la mémorisation par React 19 facilitent l'écriture d'applications performantes sans gérer manuellement l'optimisation. Le framework gère désormais automatiquement de nombreux scénarios d'optimisation courants, conduisant à un code plus propre et à de meilleures performances prêtes à l'emploi.

N'oubliez pas que même si ces optimisations sont puissantes, comprendre leur fonctionnement peut vous aider à prendre de meilleures décisions quant au moment de s'appuyer sur l'optimisation automatique plutôt que de mettre en œuvre des optimisations manuelles pour des cas d'utilisation spécifiques.

Bon codage !

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!