why-did-you-render

React 🟡 Mid

Définition

Librairie de debugging qui alerte dans la console quand un composant se re-rend inutilement (mêmes props mais nouvelle référence).

Analogie

Comme un détecteur de fuite d'eau : il te montre exactement ou tu perds des performances.

Exemple de code

// wdyr.js (importer en premier)
import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';
whyDidYouRender(React);

// Sur un composant specifique
MyComponent.whyDidYouRender = true;

Cas d'usage

Debugger les re-rendus excessifs pendant le développement pour trouver les fuites de performance.

Termes liés

#performance#devtools#debugging

← → au clavier pour passer d'une fiche à l'autre