Performance work in React starts before profiling. It starts with the shape of the component tree, where state lives, and how often expensive UI has to wake up for changes it does not care about.
Design the render path first
The fastest interaction is the one that does not force the entire surface to re-render. Keep transient state close to the component that owns it, split dense sections into small islands, and avoid passing freshly created objects through broad trees.
- Profile interactions that users repeat often, not just the initial load.
- Memoize boundaries where props are stable and rendering is visibly expensive.
- Defer non-critical work so the interface can respond first.
A fast React app feels calm: motion lands on time, input stays responsive, and heavy work never announces itself.
TypeScriptconst visiblePosts = useMemo(() => filterPosts(posts, query), [posts, query]);\n\nreturn <PostGrid posts={visiblePosts} />;
Optimization should protect the design rather than flatten it. Measure, isolate, and keep the expressive parts of the interface where they matter most.
