Skip to content
Learni
View all tutorials
Frontend

How to Optimize React Rendering in 2026

18 minINTERMEDIATE
ReactPerformance
Lire en français

Introduction

React rendering is at the heart of modern web application performance. In 2026, with increasingly complex bundles, optimizing rendering helps avoid unnecessary re-renders and improves user experience. This tutorial guides you through advanced techniques like memoization and performance hooks. You will learn to diagnose rendering issues and apply concrete solutions. Each example is designed to be directly applicable to your projects.

Prerequisites

  • Node.js 20+ and React 18+
  • Solid knowledge of TypeScript and React hooks
  • An editor like VS Code with ESLint

Project Initialization

terminal
npx create-vite@latest react-render-2026 --template react-ts
cd react-render-2026
npm install

This command creates a Vite project with TypeScript, ideal for quickly testing rendering optimizations.

Basic Component Without Optimization

src/components/ProductList.tsx
import React, { useState } from 'react';

interface Product {
  id: number;
  name: string;
  price: number;
}

const ProductList: React.FC = () => {
  const [products] = useState<Product[]>([
    { id: 1, name: 'Laptop', price: 999 },
    { id: 2, name: 'Phone', price: 599 }
  ]);
  const [filter, setFilter] = useState('');

  const filteredProducts = products.filter(p => 
    p.name.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div>
      <input 
        type="text" 
        value={filter} 
        onChange={(e) => setFilter(e.target.value)} 
      />
      {filteredProducts.map(product => (
        <div key={product.id}>{product.name} - {product.price}€</div>
      ))}
    </div>
  );
};

export default ProductList;

This component re-renders entirely on every keystroke, even if the products haven't changed. This is a classic case of inefficient rendering.

Applying React.memo

src/components/ProductItem.tsx
import React from 'react';

interface ProductItemProps {
  name: string;
  price: number;
}

const ProductItem: React.FC<ProductItemProps> = ({ name, price }) => {
  console.log('Rendu ProductItem:', name);
  return <div>{name} - {price}€</div>;
};

export default React.memo(ProductItem);

React.memo prevents the component from re-rendering if its props haven't changed. Add it to child components to reduce unnecessary calculations.

Using useMemo for Calculations

src/components/ProductList.tsx
import React, { useState, useMemo } from 'react';
import ProductItem from './ProductItem';

// ... interface Product inchangée

const ProductList: React.FC = () => {
  const [products] = useState<Product[]>([/* ... */]);
  const [filter, setFilter] = useState('');

  const filteredProducts = useMemo(() => 
    products.filter(p => 
      p.name.toLowerCase().includes(filter.toLowerCase())
    ), [products, filter]
  );

  return (
    <div>
      <input type="text" value={filter} onChange={(e) => setFilter(e.target.value)} />
      {filteredProducts.map(product => (
        <ProductItem key={product.id} name={product.name} price={product.price} />
      ))}
    </div>
  );
};

export default ProductList;

useMemo memoizes the filtering result. The dependency array ensures the calculation only runs when products or filter change.

Custom Render Hook

src/hooks/useRenderCount.ts
import { useRef, useEffect } from 'react';

export function useRenderCount(componentName: string) {
  const count = useRef(0);
  
  useEffect(() => {
    count.current += 1;
    console.log(`${componentName} a rendu ${count.current} fois`);
  });

  return count.current;
}

This hook tracks the number of renders during development to identify problematic components.

Final Hook Integration

src/components/ProductList.tsx
import { useRenderCount } from '../hooks/useRenderCount';

// Dans le composant ProductList
const ProductList: React.FC = () => {
  useRenderCount('ProductList');
  // ... reste du code
};

Integrate the hook into your components to measure the impact of your rendering optimizations in real time.

Best Practices

  • Use React.memo only on pure components with stable props
  • Combine useMemo and useCallback to avoid new references
  • Prefer unique and stable keys in lists
  • Measure performance with React DevTools before optimizing
  • Avoid premature memoization that unnecessarily complicates the code

Common Mistakes to Avoid

  • Forgetting dependencies in useMemo/useEffect arrays
  • Applying React.memo on components that receive inline objects created on every render
  • Ignoring React warnings about missing keys
  • Optimizing without first profiling the real bottlenecks

Further Reading

Deepen these concepts with our advanced React courses.