🚀 Optimizing React Performance with useMemo Hook (Real-Time Example)

When building React apps, performance optimization often feels like an afterthought — until your app starts lagging. One common issue is expensive re-calculations happening on every render, even when they’re not needed.

In this post, I’ll show you a real-time example of how useMemo can help us optimize our app with proof by comparing two components:

• Without useMemo ❌ → Filtering happens on every render
• With useMemo ✅ → Filtering only happens when search changes

🐢 Without useMemo

Here’s a simple example where we have 5,000 users and a search bar.

Every time we type something or even click a button unrelated to the search, React re-runs the filtering logic across all 5,000 users.

👉 Try clicking the Increase Count button — even though it has nothing to do with the search, the filter runs again, wasting CPU cycles.

⚡ With useMemo

Now, let’s optimize it with useMemo.

We’ll memoize the filtered list so that React only recomputes when search changes, not when unrelated state (count) changes.

👉 Now, open the console and try again. You’ll notice “Filtering users…” only logs when you change the search input, not when you click the button. 🎉

🧠 When to Use useMemo

✅ Expensive computations (like filtering, sorting, complex calculations)

✅ When you notice re-renders impacting performance

✅ For lists, tables, or search-heavy components

⚠️ Don’t overuse it — useMemo itself adds a small overhead. Use it where you know recalculations are costly.

🚀 Key Takeaway

With just one hook (useMemo), we avoided unnecessary computations and made our app more efficient.

Performance optimizations like this might seem small, but at scale (large data, heavy UI), they make a huge difference.

💡 What about you? Have you faced performance issues in your React apps? Did useMemo or useCallback help you fix them?

👇 Drop your thoughts in the comments!