What causes unnecessary re-renders and how do you diagnose them?

Common causes:

• Parent re-renders → all children re-render (even with same props, unless memoized)
• New object/array/function created inline → reference changes → memo fails
• Context value is a new object reference → all consumers re-render
• State updates that produce the same value (React bails out after first redundant render)

// ❌ New object every render — breaks memo
  // new {} each time
 doWork()} />  // new fn each time
         // new [] each time

// ❌ Context providing unstable reference
function Provider({ children }) {
  const [user, setUser] = useState(null);
  return (
      {/* new object every render! */}
      {children}
    
  );
}

// ✅ Stable context value
const value = useMemo(() => ({ user, setUser }), [user]);

Diagnosis tools:

• React DevTools → Profiler → record interaction → see what rendered and why
• React DevTools → Components → highlight updates checkbox
• why-did-you-render library — logs unnecessary renders with reasons