react-performancelisted

# React Performance (Web) ## Problem Statement React performance issues often stem from unnecessary re-renders, unoptimized lists, and expensive computations on the main thread. Understanding React's rendering behavior is key to building performant applications. --- ## Pattern: Memoization ### useMemo - Expensive Computations ```typescript // ✅ CORRECT: Memoize expensive calculation const sortedAndFilteredItems = useMemo(() => { return items .filter(item => item.active) .sort((a, b) => b.score - a.score) .slice(0, 100); }, [items]); // ❌ WRONG: Recalculates every render const sortedAndFilteredItems = items .filter(item => item.active) .sort((a, b) => b.score - a.score); // ❌ WRONG: Memoizing simple access (overhead > benefit) const userName = useMemo(() => user.name, [user.name]); ``` **When to use useMemo:** - Array transformations (filter, sort, map chains) - Object creation passed to memoized children - Computations with O(n) or higher complexity ### useCallback - Stable Function References ```typescript // ✅ CORRECT: Stable callback for child props const handleClick = useCallback((id: string) => { setSelectedId(id); }, []); // Pass to memoized child <MemoizedItem onClick={handleClick} /> // ❌ WRONG: useCallback with unstable deps const handleClick = useCallback((id: string) => { doSomething(unstableObject); // unstableObject changes every render }, [unstableObject]); // Defeats the purpose ``` **When to use useCallback:** - Callbacks pa