1. Introduction

React apps grow fast — and so do performance problems.
A component that renders 10 times per second? A list with 10,000 items? A bundle over 2MB?

Premature optimization is the root of all evil.
But measured, targeted optimization is pure magic.

Let's master the real tools that make React apps blazing fast.

2. Understanding Re-Renders

2.1 When Components Re-Render

React re-renders a component when:

• Its state changes
• Its props change
• Its parent re-renders

Even if nothing visually changes.

2.2 Avoiding Unnecessary Re-Renders

<Parent>  <ExpensiveChild data={hugeArray} /></Parent>

→ ExpensiveChild re-renders every time Parent updates, even if hugeArray never changes.

3. React.memo

Wrap functional components to skip re-renders when props are shallow-equal.

const ExpensiveChild = React.memo(function ExpensiveChild({ data }) {  console.log('ExpensiveChild rendered');  return <HeavyChart data={data} />;});// Only re-renders if `data` reference changes

Warning: Don't memo everything.
Memoization has memory + comparison cost.
→ Profile first!

4. Memoization Hooks

4.1 useMemo

const filteredUsers = useMemo(() => {return users.filter(user => user.active && user.role === 'admin');}, [users]);

4.2 useCallback

const handleSave = useCallback(() => {saveUser(user);}, [user]); // Prevents child re-renderreturn <Form onSave={handleSave} />;

5. Code Splitting

A 3MB bundle? Users wait.
Split it!

Dynamic Imports + React.lazy

const HeavyChart = React.lazy(() => import('./HeavyChart'));const Dashboard = React.lazy(() => import('./Dashboard'));function App() {return (  <Suspense fallback={<Spinner />}>    <HeavyChart />  </Suspense>);}

Next.js bonus: dynamic(() => import(...), { ssr: false })

6. Virtual Scrolling

Don't render 10,000 list items.
Render only what's visible.

Use react-window

import { FixedSizeList } from 'react-window';<FixedSizeList  height={600}  itemCount={10000}  itemSize={50}  width="100%">  {({ index, style }) => (    <div style={style}>User #{index}</div>  )}</FixedSizeList>

→ DOM has ~20 nodes, not 10,000
→ 60 FPS smooth scroll

7. Profiling Tools

Never guess. Use React DevTools Profiler.

Steps:

1. Open React DevTools → Profiler tab
2. Click Record (red circle)
3. Interact with app
4. Stop → See flame graph

Look for:

• Components rendering many times
• Long render durations
• Unnecessary re-renders

Golden rule: Measure → Optimize → Measure again

8. Common Mistakes

// 1. Memoizing everythingconst Button = React.memo(({ onClick }) => <button onClick={onClick}>Click</button>);// 2. Inline objects in JSXreturn <Child config={{ theme: 'dark' }} />; // New object every render!// 3. No Suspense fallback<React.lazy(...) /> {/* Crash on slow network */}

9. Best Practices

// 1. Memoize expensive components onlyconst Chart = React.memo(ExpensiveChart);// 2. Lift config outsideconst darkTheme = { theme: 'dark' };return <Child config={darkTheme} />;// 3. Always use Suspense<Suspense fallback={<Loading />}>  <LazyDashboard /></Suspense>

10. Performance Checklist

• Did you profile with React DevTools?
• Are you using React.memo only on expensive components?
• Are useMemo/useCallback justified by cost?
• Is your bundle split with dynamic imports?
• Are large lists virtualized?
• Are inline objects/functions avoided in render?

11. Conclusion

Performance isn't about making everything fast.
It's about making the right things fast.

Measure.
Target.
Optimize.

Your users don't care about useMemo.
They care about snappy UIs, fast loads, and smooth scrolling.

Master these tools — and build React apps that feel like native.

Written by James Miller

#React #Performance #Optimization #Frontend #WebDev #ReactProfiler #CodeSplitting