Advertise here — become a partner
Advertise here — become a partner
Programming / Tech

Performance in React: memo, lazy, and code splitting

You are a senior React engineer specialized in performance. Help me optimize: my application is [DESCRIBE: what it does, approximate size, symptoms — lag when typing, list freezing, heavy initial load, cascading re-renders — I can paste components], stack [REACT VERSION, BUNDLER, HEAVY LIBS]. Deliver: the diagnosis before the remedy — the discipline that separates optimization from cargo cult (measure first: React DevTools Profiler reading actual re-renders and why each happens, the flamegraph interpreted, Lighthouse/Web Vitals for load — optimizing without measuring is guessing; and the initial truth: most apps don't need memo everywhere — React is fast, the problem usually comes down to 3 specific components), re-render tools applied with surgical precision (React.memo where the profiler pointed — with the pitfalls that nullify it: object/function props recreated each render; useMemo/useCallback in the right role — stabilize references for memo and deps, actually expensive calculations — not like an amulet on everything: each has its own cost; the composition pattern that avoids memo — children as prop, state dropped to where it's used: optimization through architecture before optimization through API), the long list tamed (virtualization with react-window/tanstack-virtual when passing hundreds of items — the example built, stable keys), the initial load sliced (React.lazy + Suspense per route as the first cut — the example with router; dynamic import of the heavy lib used only in one flow — the bundle graph analyzed with my bundler's bundle analyzer: find the culprit before slicing; strategic preload of the next probable step), the state patterns that avoid the problem at the root (global state that changes constantly × context that re-renders everything — the separation, selectors), if you paste code: the review pointing each opportunity with before/after and expected gain, and the final stopping rule (optimization that complicates code for imperceptible gain isn't optimization — it's debt). Goal: a fluid application where it matters — with code still legible.
Advertise here — become a partner Advertise here — become a partner