Quand utiliser useMemo et useCallback : un bref guide pour les fans de React

Si vous êtes un développeur React, vous avez peut-être déjà rencontré des discussions React useMemo vs useCallback en ligne et vous vous êtes retrouvé plus confus que jamais. Il peut être très difficile de comprendre la différence entre useMemo et useCallback. C'est bon! Il peut être difficile de comprendre les React-Hooks au début, mais ils peuvent être extrêmement utiles sur toute la ligne.

Dans cet article, nous allons vous montrer la différence entre useCallback et useMemo et quand utiliser useCallback et useMemo.

La différence entre useMemo et useCallback

Deux crochets intégrés ont été introduits avec React 16.8. Ces fonctionnalités ont été introduites pour optimiser les performances. La différence entre useMemo et useCallback semble négligeable, nous allons donc essayer de dissiper la confusion.

Que sont les React-Hooks ?

Les crochets sont de nouvelles fonctionnalités introduites dans React qui permettent l'utilisation de useState et d'autres fonctionnalités de React sans écrire de classe. Les crochets sont des méthodes et des fonctions qui "s'accrochent" aux fonctionnalités d'état et de cycle de vie de React.

utiliserCallback vs utiliserMemo

Le hook useCallback est utilisé chaque fois qu'un composant enfant est restitué encore et encore sans vraiment en avoir besoin. Lorsque vous utilisez useCallback, vous pouvez empêcher ce nouveau rendu inutile en renvoyant la même instance de cette fonction qui est transmise au lieu de créer une nouvelle instance à chaque fois. Cela peut faire gagner un temps considérable (et de l'argent dépensé en heures de développement). Le passage d'un tableau de dépendances avec un rappel mémorisé entraînera une version mémorisée qui ne sera modifiée que lorsque la dépendance changera.

useMemo est utilisé dans le composant fonctionnel de React. Il est utilisé pour renvoyer une valeur mémorisée. La mémorisation fait référence au processus d'économie de temps de recompilation en renvoyant un résultat mis en cache au lieu de recompiler une fonction avec le même argument pour la prochaine exécution. Le résultat mis en cache est renvoyé la prochaine fois qu'il est appelé. Les crochets useMemo fournissent des valeurs mappées en mémoire.

Clairement, il y a quelques similitudes. Dans useMemo et useCallback, le hook accepte une fonction ainsi qu'un tableau de dépendances. Cependant, useCallback se souviendra de la valeur renvoyée et useMemo se souviendra de la fonction. En d'autres termes, l'un met en cache un type valeur et l'autre met en cache une fonction.

• LIRE PLUS - Comment et pourquoi vous devriez garder vos fichiers organisés
• Les 9 meilleures façons d'utiliser des gadgets électroniques en classe

Quand utiliser useCallback vs useMemo

Alors, quand devriez-vous utiliser useCallback, et quand useMemo est-il la meilleure option ? Prenons un exemple. Si un code lourd et coûteux en calcul accepte des arguments et renvoie une valeur, useMemo est la meilleure option. De cette façon, vous pouvez continuer à référencer la valeur entre les rendus sans réexécuter le code et perdre votre temps et votre puissance de calcul.

Si vous devez conserver une instance de fonction persistante sur plusieurs rendus, vous devez utiliser useCallback à la place car elle place essentiellement la fonction en dehors de la portée de votre composant React pour la garder intacte.

Qu'est-ce que useEffect ?

Nous avons déjà mentionné le tableau de dépendances, que vous avez peut-être rencontré lorsque vous utilisez useEffect. useEffect est un autre crochet React. Il est utilisé pour gérer les effets secondaires dans les composants fonctionnels à l'aide de la logique d'argument de rappel. Les dépendances sont la liste des dépendances de l'effet secondaire, par exemple, les accessoires ou les valeurs d'état.

Ce crochet montre à React que le composant doit effectuer une action après le rendu. Lorsque le DOM est mis à jour, l'effet que vous passez sera stocké. Vous pouvez également effectuer une récupération de données pour obtenir ce résultat.

En bref, useCallback, useMemo et useEffect visent tous à améliorer les performances entre le rendu des composants dans les applications React.

Il est important de ne pas abuser des crochets, cependant. Les crochets introduisent une logique nouvelle et complexe, et cela pourrait potentiellement avoir l'effet inverse de celui que vous aviez prévu, créant des problèmes de performances au lieu de les résoudre. useMemo ne doit être utilisé que pour des calculs vraiment coûteux.

N'utilisez pas useMemo ou useCallback pour résoudre des problèmes fondamentaux avec votre application. Finalement, ces problèmes resurgiront et vous hanteront, il est donc préférable de s'occuper d'abord des défauts connus.

• LIRE LA SUITE – Comment choisir le meilleur CMS
• Quels sont les avantages et les inconvénients des méthodes cryptographiques ?

Conclusion

J'espère que cet article était perspicace et que vous comprenez mieux les deux crochets. En résumé:

• Les deux acceptent une fonction et un tableau de dépendances
• useMemo mémorise la valeur renvoyée, useCallback mémorise la fonction.

La différence entre useMemo et useCallback est assez claire ! Ces outils ont le potentiel d'économiser du temps et de l'argent, mais seulement s'ils sont utilisés dans le contexte et l'environnement appropriés.

J'espère que ce tutoriel vous a aidé à connaître Quand utiliser useMemo et useCallback : un bref guide pour les fans de React . Si vous voulez dire quelque chose, faites-le nous savoir via les sections de commentaires. Si vous aimez cet article, partagez-le et suivez WhatVwant sur Facebook, Twitter et YouTube pour plus de conseils techniques.

Quand utiliser useMemo et useCallback – FAQ