Memoization and Optimization — Complete Guide

// Without memoization: every render recomputes
function ExpensiveComponent({ items, filter }) {
    // This runs on EVERY render of the parent
    const filtered = items.filter(item => {
        // Expensive operation
        return item.name.includes(filter) &&
               complexCheck(item.data);
    });

    return filtered.map(item => <li key={item.id}>{item.name}</li>);
}

// With memoization: only recomputes when dependencies change
function ExpensiveComponent({ items, filter }) {
    const filtered = useMemo(() => {
        // Only runs when items or filter change
        return items.filter(item => {
            return item.name.includes(filter) &&
                   complexCheck(item.data);
        });
    }, [items, filter]);  // Dependencies

    return filtered.map(item => <li key={item.id}>{item.name}</li>);
}

// Without useMemo: O(n) filtering every render
// With useMemo: O(n) filtering only when items/filter change

// Unoptimized: re-renders on every parent render
function Child({ name, onClick }) {
    console.log('Child rendered:', name);
    return <button onClick={onClick}>{name}</button>;
}

// Optimized: only re-renders when props change (shallow comparison)
const MemoizedChild = React.memo(function Child({ name, onClick }) {
    console.log('Child rendered:', name);
    return <button onClick={onClick}>{name}</button>;
});

// Parent component
function Parent() {
    const [count, setCount] = useState(0);
    const [items, setItems] = useState(['A', 'B', 'C']);

    // Problem: new function reference every render
    // Even with React.memo, the child re-renders because onClick changes
    const handleClick = () => {
        console.log('Clicked');
    };

    // Solution: stable reference with useCallback
    const stableHandleClick = useCallback(() => {
        console.log('Clicked');
    }, []);  // No dependencies — stable for entire lifecycle

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(c => c + 1)}>Increment</button>
            <MemoizedChild name="Stable" onClick={stableHandleClick} />
            {/* Child does NOT re-render when count changes */}
        </div>
    );
}

// 1. React DevTools: Highlight updates
// Enable "Highlight updates when components render" in React DevTools
// Green flashes indicate re-renders. Look for unnecessary flashes.

// 2. Custom logging hook
function useWhyDidYouUpdate(name, props) {
    const previousProps = useRef();

    useEffect(() => {
        if (previousProps.current) {
            const allKeys = Object.keys({ ...previousProps.current, ...props });
            const changedProps = {};

            allKeys.forEach(key => {
                if (previousProps.current[key] !== props[key]) {
                    changedProps[key] = {
                        from: previousProps.current[key],
                        to: props[key]
                    };
                }
            });

            if (Object.keys(changedProps).length > 0) {
                console.log('Component', name, 're-rendered because:', changedProps);
            }
        }

        previousProps.current = props;
    });
}

// Usage:
function MyComponent(props) {
    useWhyDidYouUpdate('MyComponent', props);
    return <div>{props.value}</div>;
}

// 3. Performance profiling
// Use React DevTools Profiler to record a session
// Look for components that rendered without prop changes
// These are candidates for memoization

// Pattern 1: Context splitting
// Instead of one large context, split by update frequency
const ThemeContext = createContext('light');
const UserContext = createContext(null);
const NotificationContext = createContext([]);

// Components that only need theme don't re-render
// when notifications change.
// Each context consumer only re-renders when its context changes.

// Pattern 2: Component lifting
// Move the stateful part above the memoized part
function Parent() {
    return (
        <ExpensiveList>
            <Counter />  {/* Counter re-renders independently */}
        </ExpensiveList>
    );
}

const ExpensiveList = React.memo(function({ children }) {
    return <div>{children}</div>;
});
// ExpensiveList doesn't re-render when Counter changes.

// Pattern 3: Selector functions
// Extract specific values from large objects
function DataView({ data }) {
    // Only re-render when specific fields change
    const title = useMemo(() => data.title, [data.title]);
    const items = useMemo(() => data.items, [data.items]);

    return (
        <div>
            <h1>{title}</h1>
            <List items={items} />
        </div>
    );
}

// Pattern 4: Stable references for callbacks
const handlers = useRef({
    onSave: (data) => saveData(data),
    onDelete: (id) => deleteItem(id)
});
// Never causes child re-renders due to callback changes

// 1. Add performance marks to identify slow components
function ProfiledComponent() {
    const startTime = useRef(performance.now());
    const renderCount = useRef(0);

    renderCount.current += 1;

    useEffect(() => {
        const elapsed = performance.now() - startTime.current;
        if (elapsed > 5) {
            console.warn('Slow render:', elapsed.toFixed(2) + 'ms', 'renders:', renderCount.current);
        }
        startTime.current = performance.now();
    });

    // Component content
    return <ExpensiveContent />;
}

// 2. Use requestAnimationFrame for animation performance
function AnimationFrameLogger() {
    const frameCount = useRef(0);

    useEffect(() => {
        let isActive = true;
        function logFPS() {
            if (!isActive) return;
            frameCount.current += 1;
            requestAnimationFrame(logFPS);
        }
        requestAnimationFrame(logFPS);

        const interval = setInterval(() => {
            console.log('FPS:', frameCount.current);
            frameCount.current = 0;
        }, 1000);

        return () => {
            isActive = false;
            clearInterval(interval);
        };
    }, []);
}

// 3. Only memoize when there's a measurable benefit
// Premature memoization adds code complexity without benefit