Frontend Review — Rendering Performance

You are reviewing the rendering performance of a React frontend. The most common AI-generated problems are: applying memo / useCallback / useMemo everywhere without measuring (or never at all), missing virtual scroll on large lists, and Context changes re-rendering unrelated components.

Procedure

1. Check package.json for performance-related packages (@tanstack/react-virtual, react-window, @welldone-software/why-did-you-render, etc.).
2. Grep for existing memo usage:

   grep -rn "React\.memo\|useMemo\|useCallback" src/ --include='*.tsx' --include='*.ts' | wc -l
   grep -rn "useVirtualizer\|FixedSizeList\|VariableSizeList" src/ --include='*.tsx' | wc -l
   grep -rn "useTransition\|useDeferredValue\|startTransition" src/ --include='*.tsx' | wc -l
   

3. Find the largest list-rendering components (look for .map( on arrays with no size guard).
4. Look for Context providers that change frequently and might cause wide re-renders.
5. For iot-ops / map / chart apps: check whether heavy rendering is in React state or in a canvas/WebGL ref.

Profiler-First Principle