https://javascript.plainenglish.io/i-cut-react-com...

Here’s the quick TL;DR of that piece:

• The author profiles a sluggish React app and claims ~40% fewer re-renders after a round of small but targeted fixes. (JavaScript in Plain English)

What actually moves the needle (actionable checklist)

• Stabilize props: avoid creating new objects/arrays/functions in JSX; memoize derived values and callbacks so children don’t re-render on every parent render. Use useMemo for values and useCallback for handlers. (React)
• Memoize the right boundaries: wrap leaf/expensive components with React.memo (works best when their props are referentially stable). Don’t blanket-memo everything. (React)
• Tame Context re-renders: split context by concern (e.g., separate state vs. updater contexts), memoize the provider value, or use selector patterns to limit which consumers update. (All Around JavaScript)
• Co-locate state so unrelated changes don’t bubble through big subtrees; be deliberate about when state is preserved vs. reset as components move in the tree. (React)
• Profile first, then optimize: use the React DevTools Profiler to record interactions, inspect render counts, and confirm that changes actually reduced renders. (React)
• (If you’re on React 19+) consider the React Compiler (it auto-applies memo-like optimizations) and new hooks like useEffectEvent to keep event handlers stable without churn. (React)

Drop-in examples

tsx
// 1) Stable props for children
function Parent({ items }) {
  // avoid recreating on every render
  const visible = useMemo(() => items.filter(i => i.visible), [items]);
  const onSelect = useCallback((id: string) => {/* ... */}, []);

  return <ItemList items={visible} onSelect={onSelect} />;
}

// 2) Memoized child boundary
const ItemList = React.memo(function ItemList({ items, onSelect }) {
  /* heavy render work */
});

tsx
// 3) Context split + memoized value
const UserStateCtx = createContext<{user: User|null} | undefined>(undefined);
const UserUpdateCtx = createContext<{setUser: (u: User|null) => void} | undefined>(undefined);

function UserProvider({ children }) {
  const [user, setUser] = useState<User|null>(null);
  const state = useMemo(() => ({ user }), [user]);      // stable
  const update = useMemo(() => ({ setUser }), [setUser]);
  return (
    <UserStateCtx.Provider value={state}>
      <UserUpdateCtx.Provider value={update}>{children}</UserUpdateCtx.Provider>
    </UserStateCtx.Provider>
  );
}

If you want, paste a snippet or a component tree and I’ll point out the most likely re-render hotspots and suggest targeted fixes.