⚡ Optimizing React Performance with React.memo (Real-Time Example)

We often hear about useMemo, useCallback, and React.memo — but what exactly does React.memo do, and when should you use it?

Let’s explore with a real-time example using a Parent → Child component scenario.

🔴 Without React.memo

Here’s a simple setup:

• Parent has two states: count and text
• Child always receives a static prop (value="Static Prop")

👉 Problem:

Whenever you click Increase Count, the child re-renders unnecessarily. You can confirm this by checking the console logs.

🟢 With React.memo

Now let’s wrap our Child with React.memo.

This tells React:

“Only re-render this component if its props actually change.”

👉 Now, when you click Increase Count,

• The Parent re-renders (as expected)
• But the Child does NOT re-render, since its props remain the same

🎉 Check the console — you’ll see that the child only renders once, no matter how many times you increase the count.

✅ Advantages of React.memo

1. Prevents unnecessary re-renders of child components
2. Improves performance in large component trees
3. Works best with pure components (output depends only on props)

⚡ Key Difference (React.memo vs useMemo)

• useMemo → Memoizes values/calculations inside a component
• React.memo → Memoizes entire components to skip re-rendering when props don’t change

🚀 Takeaway

If you’re passing static props (or props that rarely change) to child components, React.memo is a simple and powerful way to avoid wasteful re-renders.

💡 What about you? Do you use React.memo in your React projects? Have you ever faced unnecessary re-render issues? Let’s discuss!

Even though the child’s props never change, it still re-renders whenever the parent re-renders.