React Performance Optimisation: memoisation, lazy loading and the reconciler explained

import React, { useState } from 'react';

// A child component with a render log so we can see exactly when it fires
function ProductCard({ product, onAddToCart }) {
  // This log fires every time React calls this function — pay attention to how often it prints
  console.log(`[ProductCard] rendering: ${product.name}`);

  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={() => onAddToCart(product.id)}>Add to cart</button>
    </div>
  );
}

// The parent holds unrelated state — a search query the ProductCard doesn't care about
function ProductListPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [cartCount, setCartCount] = useState(0);

  // This object is recreated on every render of ProductListPage.
  // Even though the values haven't changed, it's a brand-new reference.
  const featuredProduct = { id: 1, name: 'Mechanical Keyboard', price: 149 };

  // Same problem: new function reference every render
  const handleAddToCart = (productId) => {
    console.log(`Adding product ${productId} to cart`);
    setCartCount(prev => prev + 1);
  };

  return (
    <div>
      <p>Cart: {cartCount} items</p>
      {/* Typing in this input triggers a re-render of ProductListPage,
          which causes ProductCard to re-render even though the product
          data and the handler haven't meaningfully changed */}
      <input
        value={searchQuery}
        onChange={e => setSearchQuery(e.target.value)}
        placeholder="Search products..."
      />
      <ProductCard
        product={featuredProduct}
        onAddToCart={handleAddToCart}
      />
    </div>
  );
}

export default ProductListPage;

import React, { useState, useCallback, useMemo } from 'react';

// React.memo wraps the component — React will now do a shallow props comparison
// before deciding whether to call this function again
const ProductCard = React.memo(function ProductCard({ product, onAddToCart }) {
  console.log(`[ProductCard] rendering: ${product.name}`);

  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      {/* Derived display value — formatted inside the component because it's cheap */}
      <p>${product.price.toFixed(2)}</p>
      <button onClick={() => onAddToCart(product.id)}>Add to cart</button>
    </div>
  );
});

function ProductListPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [cartCount, setCartCount] = useState(0);
  const [inventory] = useState([
    { id: 1, name: 'Mechanical Keyboard', price: 149, category: 'peripherals' },
    { id: 2, name: 'USB-C Hub', price: 49, category: 'peripherals' },
    { id: 3, name: 'Monitor Arm', price: 89, category: 'accessories' },
  ]);

  // useMemo stabilises the object reference — same object is returned as long as
  // inventory[0] hasn't changed. Without this, React.memo on ProductCard is worthless
  // because {id:1, name:'...', price:149} would be a new object every render.
  const featuredProduct = useMemo(
    () => inventory.find(item => item.id === 1),
    [inventory] // only recompute if inventory array reference changes
  );

  // useMemo for a genuinely expensive calculation — filtering + sorting a large list
  const filteredInventory = useMemo(() => {
    console.log('[useMemo] recomputing filtered inventory');
    return inventory
      .filter(item =>
        item.name.toLowerCase().includes(searchQuery.toLowerCase())
      )
      .sort((a, b) => a.price - b.price);
  }, [inventory, searchQuery]); // recompute only when these two change

  // useCallback stabilises the function reference passed to the memoised ProductCard.
  // If we didn't use this, ProductCard would re-render on every keystroke anyway
  // because handleAddToCart would be a new function reference each time.
  const handleAddToCart = useCallback((productId) => {
    console.log(`Adding product ${productId} to cart`);
    setCartCount(prev => prev + 1); // using functional update avoids stale closures
  }, []); // no dependencies — setCartCount identity is stable

  return (
    <div>
      <p>Cart: {cartCount} items</p>
      <input
        value={searchQuery}
        onChange={e => setSearchQuery(e.target.value)}
        placeholder="Search products..."
      />

      {/* featuredProduct reference is stable — ProductCard will NOT re-render
          when searchQuery changes, because none of its props changed */}
      <ProductCard
        product={featuredProduct}
        onAddToCart={handleAddToCart}
      />

      <h2>All Products ({filteredInventory.length})</h2>
      {filteredInventory.map(product => (
        // Each card in the list also gets the stable handler
        <ProductCard
          key={product.id}
          product={product}
          onAddToCart={handleAddToCart}
        />
      ))}
    </div>
  );
}

export default ProductListPage;

import React, { Suspense, lazy, useState } from 'react';

// The dynamic import() tells the bundler to put AnalyticsDashboard in a separate chunk.
// This module (and all its dependencies — chart libraries etc.) will only download
// when a user actually navigates to the analytics section.
const AnalyticsDashboard = lazy(() =>
  import('./pages/AnalyticsDashboard')
);

// Named export wrapper — React.lazy requires the Promise to resolve to
// { default: Component }, so we reshape named exports accordingly
const RichTextEditor = lazy(() =>
  import('./components/RichTextEditor').then(module => ({
    default: module.RichTextEditor // map named export to default
  }))
);

// A skeleton fallback that matches the approximate shape of the loading content.
// This prevents layout shift — use real dimensions matching the lazy component.
function DashboardSkeleton() {
  return (
    <div aria-busy="true" aria-label="Loading analytics dashboard">
      <div style={{ height: 48, background: '#e5e7eb', borderRadius: 8, marginBottom: 16 }} />
      <div style={{ height: 300, background: '#e5e7eb', borderRadius: 8 }} />
    </div>
  );
}

function App() {
  const [activeView, setActiveView] = useState('home');

  return (
    <div>
      <nav>
        <button onClick={() => setActiveView('home')}>Home</button>
        <button onClick={() => setActiveView('analytics')}>Analytics</button>
        <button onClick={() => setActiveView('editor')}>Editor</button>
      </nav>

      {activeView === 'home' && (
        <main>
          <h1>Welcome to the Dashboard</h1>
          <p>Select a section to get started.</p>
        </main>
      )}

      {/* Suspense boundary catches the lazy component's loading Promise.
          fallback renders while the chunk is downloading. */}
      {activeView === 'analytics' && (
        <Suspense fallback={<DashboardSkeleton />}>
          {/* AnalyticsDashboard chunk only downloads when this branch renders */}
          <AnalyticsDashboard dateRange="last-30-days" />
        </Suspense>
      )}

      {activeView === 'editor' && (
        <Suspense fallback={<div>Loading editor...</div>}>
          <RichTextEditor initialContent="Start writing..." />
        </Suspense>
      )}
    </div>
  );
}

export default App;

// Vite / webpack bundle output (approximate):
// index.js          → 42 kB   (main app, always loaded)
// AnalyticsDashboard.js → 180 kB  (chart library + dashboard, loaded on demand)
// RichTextEditor.js → 95 kB   (editor, loaded on demand)

import React, { useRef, useMemo } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';

// Generate a large dataset to demonstrate the problem clearly
function generateProductCatalogue(count) {
  return Array.from({ length: count }, (_, index) => ({
    id: index + 1,
    name: `Product ${index + 1}`,
    price: parseFloat((Math.random() * 500 + 10).toFixed(2)),
    category: ['electronics', 'clothing', 'books', 'tools'][index % 4],
    inStock: index % 7 !== 0, // every 7th item is out of stock
  }));
}

function ProductRow({ product, style }) {
  return (
    // The style prop from the virtualiser sets position:absolute, top, height
    // — this is how items are positioned within the scroll container
    <div
      style={{
        ...style,
        display: 'flex',
        alignItems: 'center',
        padding: '0 16px',
        borderBottom: '1px solid #e5e7eb',
        background: product.inStock ? '#fff' : '#fef2f2',
      }}
    >
      <span style={{ flex: 1, fontWeight: 600 }}>{product.name}</span>
      <span style={{ width: 100, color: '#6b7280' }}>{product.category}</span>
      <span style={{ width: 80, textAlign: 'right' }}>${product.price}</span>
      <span style={{ width: 80, textAlign: 'right', color: product.inStock ? '#16a34a' : '#dc2626' }}>
        {product.inStock ? 'In stock' : 'Sold out'}
      </span>
    </div>
  );
}

function VirtualisedProductList() {
  // 10,000 items — this would destroy performance without virtualisation
  const allProducts = useMemo(() => generateProductCatalogue(10_000), []);

  // The scroll container ref — the virtualiser needs to measure scroll position
  const scrollContainerRef = useRef(null);

  const virtualiser = useVirtualizer({
    count: allProducts.length,      // total number of items
    getScrollElement: () => scrollContainerRef.current, // what element scrolls
    estimateSize: () => 56,         // estimated row height in px (exact = better performance)
    overscan: 5,                    // render 5 extra rows above and below viewport as buffer
  });

  // virtualiser.getTotalSize() returns the full scrollable height as if all items were rendered
  // This makes the scrollbar feel correct even though most items don't exist in the DOM
  const totalScrollHeight = virtualiser.getTotalSize();

  // virtualiser.getVirtualItems() returns only the items currently in the render window
  const visibleItems = virtualiser.getVirtualItems();

  console.log(`Rendering ${visibleItems.length} of ${allProducts.length} items in DOM`);

  return (
    <div>
      <h2>Product Catalogue ({allProducts.length.toLocaleString()} items)</h2>

      {/* Fixed-height scroll container — must have overflow:auto and a defined height */}
      <div
        ref={scrollContainerRef}
        style={{ height: 600, overflow: 'auto', border: '1px solid #e5e7eb', borderRadius: 8 }}
      >
        {/* Inner div is sized to the FULL list height so the scrollbar is accurate */}
        <div style={{ height: totalScrollHeight, position: 'relative' }}>
          {visibleItems.map(virtualItem => {
            const product = allProducts[virtualItem.index];
            return (
              <ProductRow
                key={product.id}
                product={product}
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: '100%',
                  // transform is used instead of top offset for GPU-composited scrolling
                  transform: `translateY(${virtualItem.start}px)`,
                  height: `${virtualItem.size}px`,
                }}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default VirtualisedProductList;