React Developers: You Don’t Always Need memo

It's well-known that when a React component re-renders, all of its children re-render too.

Consider this scenario: We have a parent component that updates its state frequently (e.g., on mouse move) and a child component inside it.

Here, every time the mouse moves, <MovingComponent/> re-renders, which also forces <HeavyChild /> to re-render—even if it doesn’t need to! As the child is heavy, this can seriously impact performance.

✅ Common Solution:
We typically solve this by wrapping <HeavyChild /> React.memo to prevent unnecessary re-renders.

But here's another elegant approach that doesn’t involve memo: Component Composition.

💡 Using Component Composition

Instead of defining the child inside the parent, extract it and pass it as children:

Now, <HeavyChild /> is created outside , so it won’t re-render whenever the MovingComponent’s state updates.

🔥 Takeaway:
memo is great, but sometimes restructuring your component tree using composition is a cleaner, more natural way to prevent unnecessary re-renders and improve performance.

Comments

[Sugunan]

Hey just went through your post and this idea is actually good. Just curious what makes HeavyChild not re-render when written as children?

[Arjun R Pillai]

Thanks so much! 😊 Great question—I'm planning a Part 2 that’ll explain exactly why HeavyChild doesn’t re-render when used as children. Stay tuned!

[Sugunan]

Wow, eagerly waiting for Part 2 🥳

[Sreekuttan]

Composition is such a clean way to avoid overusing memo. Thanks for sharing!

[Arjun R Pillai]

Thank you! 🙌 Absolutely agree—composition is such a powerful pattern and a great way to reduce the need for memo. I’m super excited to dive deeper into this in Part 2—stay tuned