Why Performance Matters

A 1-second delay in page load can reduce conversions by 7%. Let's fix that.

1. useMemo for Expensive Calculations

const expensiveValue = useMemo(() => {
  return heavyCalculation(data)
}, [data])

2. useCallback for Functions

const handleClick = useCallback(() => {
  doSomething(id)
}, [id])

3. React.memo for Components

const MyComponent = React.memo(({ data }) => {
  return <div>{data.title}</div>
})

4. Lazy Loading Components

const HeavyComponent = lazy(() => import('./HeavyComponent'))

<Suspense fallback={<Loading />}>
  <HeavyComponent />
</Suspense>

5. Virtual Lists for Long Data

Use react-window for rendering thousands of items efficiently.

6. Avoid Anonymous Functions in JSX

// ❌ Bad
<button onClick={() => handleClick(id)}>Click</button>

// ✅ Good  
<button onClick={handleClick}>Click</button>

7. Code Splitting

Split your bundle with dynamic imports to reduce initial load time.

8. Debounce Input Handlers

const debouncedSearch = useMemo(
  () => debounce(handleSearch, 300),
  []
)

9. Optimize Images

Always compress and use modern formats like WebP.

10. Profile with React DevTools

Use the Profiler tab to find what's actually slow before optimizing.

Final Thoughts

Apply these one by one, measure each change, and only keep what actually improves your metrics.