🚀 React Performance Optimization Tips I Wish I Knew Earlier

🤯 Introduction

When I began using React, I was obsessed with making things work — not making them fast. Over time, I noticed lags, unnecessary re-renders, and slow UI. That’s when I dove deep into performance and found gold.

In this post, I’ll share React performance optimization tips I wish I knew earlier, so you can skip the slowdowns and jump straight to building snappy apps.

⚙️ 1. Use React.memo Smartly

React re-renders components even if the props haven’t changed — unless you wrap them in React.memo.

const Button = React.memo(({ onClick, children }) => { console.log("Button rendered"); return <button onClick={onClick}>{children}</button>; }); 

✅ Use it for pure components receiving primitive props.
❌ Don’t overuse — memo itself has an overhead.

🧠 2. Optimize with useCallback & useMemo

Prevent unnecessary re-renders or recalculations.

const handleClick = useCallback(() => { console.log("Clicked!"); }, []); 

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

These hooks keep references stable and prevent child components from rerendering.

💥 3. Avoid Inline Functions & Objects in JSX

Inline functions get recreated on every render:

// ❌ Triggers re-renders <MyComponent onClick={() => doSomething()} /> // ✅ Better with useCallback const handleClick = useCallback(() => doSomething(), []); <MyComponent onClick={handleClick} /> 

Same applies to style={{}} and inline objects.

📦 4. Code-Splitting with React.lazy & Suspense

Don’t ship your entire app upfront.

const Settings = React.lazy(() => import('./Settings')); <Suspense fallback={<Loader />}> <Settings /> </Suspense> 

📉 Keeps bundle size small
🚀 Faster initial page load

🧹 5. Clean Up useEffect Side Effects

Uncleared intervals or subscriptions lead to memory leaks.

useEffect(() => { const id = setInterval(doSomething, 1000); return () => clearInterval(id); }, []); 

Always clean up effects when using timers, listeners, or subscriptions.

🔄 6. Avoid Unnecessary Re-renders

Use tools like:

• why-did-you-render
• React DevTools Profiler

// Development only import whyDidYouRender from '@welldone-software/why-did-you-render'; if (process.env.NODE_ENV === 'development') { whyDidYouRender(React); } 

These help you see what’s rerendering and why.

🐢 7. Virtualize Long Lists

Rendering hundreds of DOM nodes? That’s slow.

Use react-window or react-virtualized:

import { FixedSizeList as List } from 'react-window'; <List height={400} itemCount={1000} itemSize={35} width={300}> {({ index, style }) => <div style={style}>Item {index}</div>} </List> 

Only renders visible items. Huge performance gain.

🧯 8. Debounce Expensive Updates

Avoid re-rendering on every keystroke.

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

Use:

• lodash.debounce
• use-debounce (React hook)

💡 9. Bonus Quick Wins

• Error Boundaries Prevent the entire UI from crashing:

 class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } render() { return this.state.hasError ? <Fallback /> : this.props.children; } } 

• Skeleton Loaders Improve perceived performance:

 <div className="h-6 w-full bg-gray-300 animate-pulse" /> 

• Intersection Observer with useRef Lazy load components only when in view.

 const ref = useRef(); useEffect(() => { const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { // Trigger load } }); if (ref.current) observer.observe(ref.current); }, []); 

🎯 Final Thoughts

React is powerful, but without understanding how rendering works, it’s easy to make your UI sluggish.

The key is to be intentional: Measure → Identify → Optimize.

I hope these tips help you build smoother, faster, and more efficient React apps!