Découverte
Notions avancées
Les hooks
Notions avancées
TP
TP Recettes: AuthentificationRéservé aux membres premiums
30 min
TP Recettes: Récupération des ingrédientsRéservé aux membres premiums
38 min
TP Recettes: Gestion des ingrédientsRéservé aux membres premiums
29 min
TP Recettes: Gestion des recettesRéservé aux membres premiums
39 min
TP Recettes: Création d'une recetteRéservé aux membres premiums
47 min
TP Recettes: Edition d'une recetteRéservé aux membres premiums
25 min
Conclusion
Conclusion
04 min

Dans ce chapitre nous allons voir l'impact que peut avoir un rendu et comment optimiser les composants qui contiennent une logique complexe. Lorsqu'un changement d'état est opéré sur un composant, sa fonction render() est appelée et l'ensemble des sous composant sont rendu à nouveau. Il est cependant possible de mémoriser le rendu d'un élément afin d'éviter les rendu consécutif si ses propriétés et son état n'a pas changé depuis le dernier rendu. Il existe 2 méthodes pour "mémoiser" un composant :

Si votre composant est une fonction il suffit d'utiliser la fonction React.memo

const ProductRow  = React.memo(function ({product}) {
    const name = product.stocked ? 
        product.name : 
        <span className="text-danger">{product.name}</span>
        console.log('render product')
    return <tr>
        <td>{name}</td>
        <td>{product.price}</td>
    </tr>
})

Si votre composant est une classe alors il suffit d'hériter de React.PureComponent à la place de React.Component.