react-performance

React Performance Optimization

Performance patterns to prevent unnecessary re-renders, reduce bundle size, and create responsive UIs.

When to Use This Skill

• Optimizing slow components
• Reducing bundle size
• Fixing unnecessary re-renders
• Improving initial load time
• Debugging performance issues

Critical: Prevent Waterfalls

Impact: CRITICAL - The highest impact optimization.

What is a Waterfall?

Sequential requests where each waits for the previous:

Timeline:
[----Parent Data Fetch----]
                           [----Child Data Fetch----]
                                                     [----Grandchild Fetch----]
Total: 900ms

Anti-Pattern: Fetch on Mount

// ❌ BAD: Creates waterfall
function ParentComponent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchParentData().then(setData);  // Child waits for this
  }, []);
  
  if (!data) return <Loading />;
  return <ChildComponent parentId={data.id} />;
}

function ChildComponent({ parentId }: { parentId: string }) {
  const [childData, setChildData] = useState(null);
  
  useEffect(() => {
    fetchChildData(parentId).then(setChildData);  // Waits for parent
  }, [parentId]);
  
  return <div>{childData?.name}</div>;
}

Solution: Parallel Data Fetching

// ✅ GOOD: Fetch in parallel at top level
function ParentComponent() {
  const { parentData, childData, isLoading } = useParallelData();
  
  if (isLoading) return <Loading />;
  
  return (
    <div>
      <ParentView data={parentData} />
      <ChildView data={childData} />
    </div>
  );
}

function useParallelData() {
  const [data, setData] = useState({ parentData: null, childData: null });
  const [isLoading, setIsLoading] = useState(true);
  
  useEffect(() => {
    Promise.all([fetchParentData(), fetchChildData()])
      .then(([parentData, childData]) => {
        setData({ parentData, childData });
        setIsLoading(false);
      });
  }, []);
  
  return { ...data, isLoading };
}