Comparez 4 stratégies d'optimisation React en temps réel sur un benchmark interactif. Mesurez l'impact de React.memo, useMemo et useCallback sur le temps de rendu d'une liste de produits avec recherche.
Mesures réelles, pas de simulation
Les temps affichés sont mesurés en temps réel via performance.now() dans votre navigateur. Chaque scénario exécute du vrai code React avec des calculs coûteux — les résultats varient selon votre machine.
Comparez les temps de rendu entre différentes approches d'optimisation
Aucun memo, useMemo ou useCallback
Cliquez sur "Lancer le test"
Items mémorisés uniquement
Cliquez sur "Lancer le test"
Liste filtrée mémorisée uniquement
Cliquez sur "Lancer le test"
React.memo + useMemo + useCallback
Cliquez sur "Lancer le test"
1function ProductList() {2 const [search, setSearch] = useState('');3
4 // Filtrage recalculé à chaque render5 const filteredProducts = products.filter(product =>6 product.name.toLowerCase().includes(search.toLowerCase())7 );8
9 // Nouvelle fonction créée à chaque render10 const handleSearch = (e) => {11 setSearch(e.target.value);12 };13
14 return (15 <div>16 <input onChange={handleSearch} />17 {filteredProducts.map(product => (18 // ProductItem re-render même si product n'a pas changé19 <ProductItem key={product.id} product={product} />20 ))}21 </div>22 );23}24
25// Composant Item non optimisé26function ProductItem({ product }) {27 const expensiveCalculation = () => {28 let result = 0;29 for (let i = 0; i < 100000; i++) {30 result += Math.random();31 }32 return result;33 };34
35 expensiveCalculation();36 return <div>{product.name}</div>;37}