React Performance Optimization
Demo Creator
@seed-creator · muallif
The React Profiler
Open DevTools → Profiler → Record, interact with the UI, stop. The flame chart shows every component render, its duration, and what triggered it. Start here before reaching for memo.
Premature optimization is the root of all evil. The profiler shows you where the evil actually lives.
React.memo and useMemo
React.memo wraps a component and skips re-rendering when props have not changed (shallow comparison). useMemo memoizes a computed value. Both have overhead — only apply after profiling.
Context re-renders every consumer whenever its value changes. Split contexts by update frequency: a theme context (rarely changes) and a user context (changes on login) should be separate.
Code Splitting with Suspense
React.lazy() and Suspense enable component-level code splitting. Route-level splitting reduces the initial bundle; feature-level splitting defers heavy components that are not in the critical path.
const Editor = React.lazy(() => import('./Editor')); function App() { return ( <Suspense fallback={<Spinner />}> <Editor /> </Suspense> );}
The import() is a dynamic import that webpack/vite will split into a separate chunk.
0 ta izoh
Tizimga kiring izoh qoldirish uchun.