{"id":56797,"date":"2022-05-10T08:05:09","date_gmt":"2022-05-10T07:05:09","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=56797&preview=true&preview_id=56797"},"modified":"2024-10-08T13:15:43","modified_gmt":"2024-10-08T12:15:43","slug":"utiliser-callback-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/utiliser-callback-react\/","title":{"rendered":"Apprendre \u00e0 apprivoiser le hook Callback de React"},"content":{"rendered":"

Ce n’est un secret pour personne que React.js est devenu tr\u00e8s populaire<\/a> ces derni\u00e8res ann\u00e9es. C’est maintenant la biblioth\u00e8que JavaScript de choix<\/a> pour de nombreux acteurs les plus en vue de l’Internet, y compris Facebook et WhatsApp.<\/p>\n

L’une des principales raisons de son essor est l’introduction des hooks dans la version 16.8<\/a>. Les hooks React vous permettent d’exploiter les fonctionnalit\u00e9s de React sans avoir \u00e0 \u00e9crire des composants de classe. D\u00e9sormais, les composants fonctionnels avec des hooks sont devenus la structure de pr\u00e9dilection des d\u00e9veloppeurs pour travailler avec React.<\/p>\n

Dans cet article de blog, nous allons approfondir un hook sp\u00e9cifique – useCallback<\/code> – car il touche \u00e0 une partie fondamentale de la programmation fonctionnelle connue sous le nom de m\u00e9morisation. Vous saurez exactement comment et quand utiliser le hook useCallback<\/code> et tirer le meilleur parti de ses capacit\u00e9s d’am\u00e9lioration des performances.<\/p>\n

Pr\u00eat ? C’est parti !<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Qu’est-ce que la m\u00e9morisation ?<\/h2>\n

La m\u00e9morisation consiste \u00e0 ce qu’une fonction complexe stocke sa sortie afin qu’elle soit appel\u00e9e la prochaine fois avec la m\u00eame entr\u00e9e. C’est similaire \u00e0 la mise en cache<\/a>, mais \u00e0 un niveau plus local. Elle permet de sauter les calculs complexes et de renvoyer la sortie plus rapidement puisqu’elle est d\u00e9j\u00e0 calcul\u00e9e.<\/p>\n

Cela peut avoir un effet significatif sur l’allocation de m\u00e9moire et les performances, et cette contrainte est ce que le hook useCallback<\/code> est cens\u00e9 all\u00e9ger.<\/p>\n

React’s useCallback vs useMemo<\/h3>\n

\u00c0 ce stade, il est utile de mentionner que useCallback<\/code> se combine parfaitement avec un autre hook appel\u00e9 useMemo<\/code>. Nous les aborderons tous les deux, mais dans cet article, nous allons nous concentrer sur useCallback<\/code> comme sujet principal.<\/p>\n

La diff\u00e9rence essentielle est que useMemo<\/code> renvoie une valeur m\u00e9moris\u00e9e, alors que useCallback<\/code> renvoie une fonction m\u00e9moris\u00e9e. Cela signifie que useMemo<\/code> est utilis\u00e9 pour stocker une valeur calcul\u00e9e, tandis que useCallback<\/code> renvoie une fonction que vous pouvez appeler plus tard.<\/p>\n

Ces hooks vous renvoient une version en cache, sauf si l’une de leurs d\u00e9pendances (par exemple, l’\u00e9tat ou les props) change.<\/p>\n

Jetons un coup d’oeil aux deux fonctions en action :<\/p>\n

import { useMemo, useCallback } from 'react'\nconst values = [3, 9, 6, 4, 2, 1]\n\n\/\/ This will always return the same value, a sorted array. Once the values array changes then this will recompute.\nconst memoizedValue = useMemo(() => values.sort(), [values])\n\n\/\/ This will give me back a function that can be called later on. It will always return the same result unless the values array is modified.\nconst memoizedFunction = useCallback(() => values.sort(), [values])<\/code><\/pre>\n
L’extrait de code ci-dessus est un exemple artificiel mais montre la diff\u00e9rence entre les deux callbacks :<\/p>\n
    \n
  1. memoizedValue<\/code> deviendra le tableau [1, 2, 3, 4, 6, 9]<\/code>. Tant que la variable valeurs reste, il en sera de m\u00eame pour memoizedValue<\/code>, et il ne sera jamais recalcul\u00e9.<\/li>\n
  2. memoizedFunction<\/code> sera une fonction qui retournera le tableau [1, 2, 3, 4, 6, 9]<\/code>.<\/li>\n<\/ol>\n
    Ce qui est g\u00e9nial avec ces deux callbacks, c’est qu’ils sont mis en cache et restent en place jusqu’\u00e0 ce que le tableau de d\u00e9pendances change. Cela signifie que lors d’un rendu, ils ne seront pas collect\u00e9s.<\/p>\n\n
    Rendu et React<\/h2>\n
    Pourquoi la m\u00e9morisation est-elle importante lorsqu’il s’agit de React ?<\/p>\n
    Cela a \u00e0 voir avec la fa\u00e7on dont React rend vos composants. React utilise un DOM virtuel stock\u00e9 en m\u00e9moire pour comparer les donn\u00e9es et d\u00e9cider de ce qu’il faut mettre \u00e0 jour.<\/p>\n
    Le DOM virtuel aide React avec la performance et garde votre application rapide. Par d\u00e9faut, si une valeur de votre composant change, le composant entier sera rendu \u00e0 nouveau. Cela rend React \u00ab r\u00e9actif \u00bb aux entr\u00e9es de l’utilisateur et permet de mettre \u00e0 jour l’\u00e9cran sans recharger la page.<\/p>\n
    Vous ne voulez pas rendre votre composant parce que les changements n’affecteront pas ce composant. C’est l\u00e0 que la m\u00e9morisation par le biais de useCallback<\/code> et useMemo<\/code> s’av\u00e8re utile.<\/p>\n
    Lorsque React effectue un nouveau rendu de votre composant, il recr\u00e9e \u00e9galement les fonctions que vous avez d\u00e9clar\u00e9es \u00e0 l’int\u00e9rieur de votre composant.<\/p>\n
    Notez que lorsque vous comparez l’\u00e9galit\u00e9 d’une fonction \u00e0 une autre fonction, elle sera toujours fausse. Parce qu’une fonction est \u00e9galement un objet, elle ne sera \u00e9gale qu’\u00e0 elle-m\u00eame :<\/p>\n
    \/\/ these variables contain the exact same function but they are not equal\nconst hello = () => console.log('Hello Matt')\nconst hello2 = () => console.log('Hello Matt')\n\nhello === hello2 \/\/ false\nhello === hello \/\/ true<\/code><\/pre>\n
    En d’autres termes, lorsque React rendra \u00e0 nouveau votre composant, il verra toutes les fonctions d\u00e9clar\u00e9es dans votre composant comme \u00e9tant de nouvelles fonctions.<\/p>\n
    Ceci est tr\u00e8s bien la plupart du temps, et les fonctions simples sont faciles \u00e0 calculer et n’auront pas d’impact sur les performances. Mais les autres fois, lorsque vous ne voulez pas que la fonction soit vue comme une nouvelle fonction, vous pouvez compter sur useCallback<\/code> pour vous aider.<\/p>\n
    Vous pensez peut-\u00eatre : \u00ab Quand est-ce que je ne voudrais pas qu’une fonction soit vue comme une nouvelle fonction ? \u00bb Eh bien, il y a certains cas o\u00f9 useCallback<\/code> est plus logique :<\/p>\n
      \n
    1. Vous passez la fonction \u00e0 un autre composant qui est \u00e9galement m\u00e9moris\u00e9 (useMemo<\/code>)<\/li>\n
    2. Votre fonction a un \u00e9tat interne qu’elle doit m\u00e9moriser<\/li>\n
    3. Votre fonction est une d\u00e9pendance d’un autre hook, comme useEffect<\/code> par exemple<\/li>\n<\/ol>\n
      Avantages en termes de performances de React useCallback<\/h2>\n
      Lorsque useCallback<\/code> est utilis\u00e9 de mani\u00e8re appropri\u00e9e, il peut contribuer \u00e0 acc\u00e9l\u00e9rer votre application et \u00e0 emp\u00eacher les composants d’effectuer un nouveau rendu s’ils n’en ont pas besoin.<\/p>\n
      Disons, par exemple, que vous avez un composant qui r\u00e9cup\u00e8re une grande quantit\u00e9 de donn\u00e9es et qui est responsable de l’affichage de ces donn\u00e9es sous la forme d’un tableau ou d’un graphique<\/a>, comme ceci :<\/p>\n
      \n
      \"Graphique
      Graphique \u00e0 barres g\u00e9n\u00e9r\u00e9 \u00e0 l’aide d’un composant React.<\/figcaption><\/figure><\/figure>\n
      Supposons que le composant parent de la composante de votre visualisation de donn\u00e9es se reforme, mais que les props ou l’\u00e9tat modifi\u00e9s n’affectent pas cette composante. Dans ce cas, vous n’avez probablement pas envie ou besoin de le rendre \u00e0 nouveau et de r\u00e9cup\u00e9rer toutes les donn\u00e9es. En \u00e9vitant ce nouveau rendu et cette nouvelle r\u00e9cup\u00e9ration, vous pouvez \u00e9conomiser la bande passante de votre utilisateur et lui offrir une exp\u00e9rience plus fluide.<\/p>\n
      Inconv\u00e9nients de React useCallback<\/h2>\n
      Bien que ce hook puisse vous aider \u00e0 am\u00e9liorer les performances, il comporte \u00e9galement des \u00e9cueils. Voici quelques \u00e9l\u00e9ments \u00e0 prendre en compte avant d’utiliser useCallback<\/code> (et useMemo<\/code>) :<\/p>\n