Mémoisation et useCallback — Formation Apprendre React

Dans React un composant est rendu (le code de sa fonction est exécuté) à chaque fois que son état change ou lorsque le composant parent est re rendu. Cette caractéristique peut mener à des problématiques en terme de performances si certains composant ont une logique de rendu complexe. Aussi certains composants ne changent pas de structure souvent et il est dommage de les rendre systématiquement. Pour éviter ce problème là on va pouvoir utiliser la mémoïsation au niveau du composant grâce à la fonction memo().

Cette fonction va venir décorer le code d’un composant et fera en sorte que le composant ne soit re-rendu que lorsqu’une de ses propriétés change.

const MonComposant = memo((props) => {
    return <div>
        Je suis un composant couteux
    </div>
}))

De cette manière là, si notre composant est appelé à de multiples reprises avec les mêmes paramètres le résultat des appels précédents sera utilisé ce qui permet d’éviter d’exécuter la fonction inutilement.

Attention au callback

Lorsque l’on utilise un composant mémoïsé; il faudra faire attention aux paramètres qu’on lui envoie point afin de s’assurer que c’est par maître ne change pas systématiquement.

function Demo () {
    const handleClick = () => console.log('ceci est un clic')

    return <div>
        <MonComposant onClick={handleClick} />
    </div>
}

Le problème, ici, est que l’on redéclare une nouvelle fonction handleClick à chaque fois que a fonction Demo est exécutée et on perd alors tout l’intérêt d’avoir mémoïsé notre composant. Aussi il faudra s’assurer d’utiliser des versions mémoïsées des callbacks.

function Demo () {
    const handleClick = useCallback(() => console.log('ceci est un clic'), [])

    return <div>
        <MonComposant onClick={handleClick} />
    </div>
}

Le Hook useCallback() est simplement un useMemo() spécifiquement conçu pour les fonctions.

// useMamo est trop verbeux pour des callbacks
const handleClick = useMemo(() => {
    return () => {
        console.log('handler')
    }
}, [])

// C'est équivalent à
const handleClick = useCallback(() => {
    console.log('handler')
}, [])

La règle d’utilisation du useCallback() est la même que useMemo(). Si votre callback utilise des variables dans la portée du composant, il faudra les ajouter au tableau de dépendance.

Aller plus loin

En apprendre plus sur la documentation