Tutoriel Vidéo Composant pur

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.