Il y a quelque mois s’est déroulé la React Europe Conférence à Paris. Durant ces deux jours, pas mal de sujets ont été traités comme Flux, React Native, React Router, Relay & GraphQL, etc… Jusque là, rien de nouveau.

En revanche, la conférence qui nous intéresse ici est Making your app fast with high-performance components par Jason Bonta. React est connu pour être un framework performant de base (cette vidéo nous le prouve d’ailleurs dans les 5 première minutes: [youtube z5e7kWSHWTg]) mais un mauvais usage de cette technologie pourra tout de même entrainer l’apparition de lenteurs dans nos applications.

Dans cette conférence, Jason parle notamment de l’usage de shouldComponentUpdate qui fait partie des lifecycle methods et qui est aujourd’hui trop peu utilisée.
Cette méthode reçoit les props et le state précédent ainsi que les props et le state suivant et son rôle est de déterminer si oui ou non le composant doit se rendre à nouveau (en retournant true ou false).
Dans la majorité des cas, il suffirait de vérifier s’il existe une différence entre les props précédentes et suivantes ainsi que le state précédent et le state suivant.

Heureusement, il existe dans React un mixin permettant d’implémenter cette fonctionnalité facilement: Le PureRenderMixin.
Ce mixin implémente tout simplement le méthode shoudComponentUpdate qui effectue une comparaison entre les props et les state.

Cependant, Il est important de noter deux choses:
Le PureRenderMixin ne fonctionnera correctement que si le composant est « pur », c’est à dire que pour un même state et un même props, il affiche le même résultat.
Aussi, le mixin n’effectue qu’un « shallow equal » (c’est à dire une comparaison uniquement sur le premier niveau de profondeur de l’objet) car sur des objets complexes cela pourrait devenir vite contre productif.
Ainsi si les props ou le state contiennent des sous objet, la comparaison se fera au niveau des références.

C’est là qu’interviennent les objets immutables. Ces objets ont la particularité de conserver la même référence si leurs attributs n’ont subit aucun changement au cours d’une mise à jour. Ainsi, peu importe la complexité d’un objet immutable il est possible de comparer deux objets immutables simplement par leur référence. La librairie la plus connue permettant de profiter de cette fonctionnalité est ImmutableJS que nous utilisons déjà.

Dans la suite de la conférence, Jason fait mention des éléments enfants qu’il est possible de transmettre à un composant auquel ce dernier a accès via la  propriété this.props.children. Cette propriété pose problème car la référence de this.props.children change à chaque nouveau rendu de l’élément parent rendant encore une fois le PureRenderMixin inutile. Ainsi, sa conclusion est qu’il faut les éviter au maximum.

En bref, cette conférence regorge de plein de précieux conseils et astuces que nous pouvons mettre facilement en application dans nos projets, alors pourquoi s’en priver ?