You Are Using useEffect Wrong: React Performance Myths

React is fast by default. When it becomes slow, it is usually because developers are fighting the reconciliation engine rather than working with it. The most common crime? Misunderstanding Referential Equality.

The !== Problem

In JavaScript, { id: 1 } is not equal to { id: 1 }. They are two different objects in memory. If you pass an object literal as a prop to a child component, React sees it as a "new" prop every single render, forcing a re-render of the child.

This cascades down your component tree. A single parent re-render can cause thousands of wasted cycles in children.

useMemo is Not a Silver Bullet

Junior devs discover useMemo and wrap everything in it. This is bad practice. The hook itself has a cost (memory allocation for the cache). You should only memoize calculations that are expensive (like filtering a 10,000 item array) or to preserve referential equality for dependency arrays.

The useEffect Dependency Trap

If you put an object in a useEffect dependency array without memoizing it, you create an infinite loop. The effect runs - state updates - component re-renders - object is recreated (new reference) - effect sees "change" - effect runs again.

Code Splitting & Minification

Performance isn't just runtime; it's load time. Shipping a 5MB bundle to a mobile phone on 3G is a user experience failure. Always split your code using React.lazy.

Furthermore, ensure your build pipeline (Webpack/Vite) is correctly minifying your assets. You can verify the output of your build logic using a JS Minifier to see how much whitespace and dead code is actually being stripped.