Formation React : Les hook useMemo & useCallback

Un des problèmes que l'on rencontre avec les composants sous formes de fonctions est l'impossibilité de "sauvegarder" une mémoire car on n'a pas de notion d'instance au sein d'une fonction. Aussi, lors d'un changement d'état le code entier de votre fonction est relancé pour créer le nouveau rendu est cela peut être inefficace dans certaines situations. useMemo va permettre de créer une valeur qui va être mémoïsée.

const htmlContent = useMemo(function () {
    return Markdown.parse(content)
}, [content])

On va ainsi mémorisée le retour de la fonction en fonction de la dépendance spécifiée en second paramètre. Si lors d'un nouveau rendu la dépendance n'a pas changée, alors on récupérera la valeur en mémoire et on évitera de faire le traitement. En revanche, si le contenu a changé depuis le dernier rendu, la fonction sera exécutée à nouveau et la nouvelle valeur sera persisté en mémoire. Cette méthode peut aussi être utilisée pour ne pas générer de nouveau callback à chaque rendu (et ainsi permettre à des composants pures de ne pas être rerendu

function MonComposant () {
     // ....
     const handleClick = function () {
            console.log('hello')   
     }
     return <MonComposantPure onClick={handleClick}/>
}

Lors de chaque rendu de MonComposant, un nouveau callback est créé et, même si la logique à l'intérieur de ce callback ne change pas, la vérification d'identité échouera dans le composant pure et un nouveau rendu sera fait.

function MonComposant () {
     // ....
     const handleClick = useMemo(function () {
         return function () {
            console.log('hello')   
         }
     }, [])
     return <MonComposantPure onClick={handleClick}/>
}

En utilisant le hook useMemo on s'assure que le callback ne change pas entre les rendus et on évite ainsi les rendu au niveau du composant pure. Il existe d'ailleurs un second hook qui permet de simplifier l'écriture dans le cadre de callback (la logique est la même que pour useMemo).

function MonComposant () {
     // ....
     const handleClick = useCallback(function () {
        console.log('hello')   
     }, [])
     return <MonComposantPure onClick={handleClick}/>
}