When building React applications, two concepts help developers create:

✅ Faster applications
✅ Cleaner code
✅ Reusable components
✅ Better maintainability

Those concepts are:

• React.memo
• Component Composition

In this guide, you’ll learn both concepts clearly with real-world examples.

---

What You Will Learn

✔ What is React.memo
✔ Why we need it
✔ How it improves performance
✔ What is Composition
✔ Why Composition is preferred in React
✔ Real-world examples for both

---

Part 1: Understanding React.memo

What is React.memo?

Simple Definition

React.memo is a higher-order component that prevents unnecessary re-rendering of functional components.

---

Why Do We Need React.memo?

In React:

👉 Parent component re-renders
➡ Child components also re-render

Even if:

• Props did not change
• UI did not change

This can reduce performance.

---

Example Without React.memo

❌ Code

import { useState } from "react";

function Child() {
  console.log("Child Rendered");
  return <h2>Child Component</h2>;
}

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <Child />
    </div>
  );
}

export default App;

---

What Happens Here?

Whenever count changes:

setCount(count + 1)

👉 Parent re-renders
👉 Child ALSO re-renders

Even though Child has no relation to count.

---

Optimized with React.memo

✅ Code

import { memo } from "react";

const Child = memo(function Child() {
  console.log("Child Rendered");
  return <h2>Child Component</h2>;
});

export default Child;

---

Now What Happens?

When parent re-renders:

👉 React compares previous props vs new props

If props are same:

✅ Child render is skipped

---

Important Rule

React.memo works best when:

✔ Props are stable
✔ Component renders frequently
✔ Rendering is expensive

---

⚠️ Example Where React.memo Fails

❌ Problem

<Child data={{ name: "React" }} />

Why?

Because:

{ name: "React" }

creates a NEW object every render.

👉 React thinks props changed.

---

Fix with useMemo

const data = useMemo(() => ({
  name: "React"
}), []);

---

Real-World Example

Imagine:

• Dashboard with charts
• Huge tables
• Complex UI

Without optimization:

❌ Unnecessary renders
❌ Slow UI

With React.memo:

✅ Better performance

---

When NOT to Use React.memo

Avoid if:

• Component is very small
• Props change frequently
• Optimization not needed

👉 Overusing memo can increase complexity.

---

Interview Tip

❓ What is React.memo?

👉 Answer:

React.memo prevents unnecessary re-rendering of functional components by memoizing rendered output based on props comparison.

---

Part 2: Understanding Composition in React

📌 What is Composition?

Simple Definition

Composition means building complex UI using smaller reusable components.

---

Basic Composition Example

🔹 Button Component

function Button({ children }) {
  return (
    <button>
      {children}
    </button>
  );
}

---

🔹 Usage

<Button>Save</Button>
<Button>Delete</Button>

---

Why Composition is Powerful

Composition helps:

✅ Reusability
✅ Cleaner architecture
✅ Scalability
✅ Separation of concerns

---

Composition with Layouts

Card Component

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

---

Usage

<Card>
  <h2>React</h2>
  <p>Composition Example</p>
</Card>

---

Composition Using Props

Modal Component

function Modal({ title, content, footer }) {
  return (
    <div className="modal">
      <h2>{title}</h2>
      <div>{content}</div>
      <footer>{footer}</footer>
    </div>
  );
}

---

Usage

<Modal
  title="Delete User"
  content={<p>Are you sure?</p>}
  footer={<button>Confirm</button>}
/>

---

Composition vs Inheritance

React documentation recommends:

✅ Composition
❌ Inheritance

---

Inheritance Problem

Inheritance creates:

• Tight coupling
• Complexity

---

Composition Advantage

Composition provides:

• Flexibility
• Better maintainability

---

Advanced Composition Pattern

Compound Components

Example:

<Tabs>
  <Tabs.List />
  <Tabs.Panel />
</Tabs>

Used in:

• UI libraries
• Design systems

---

Combining React.memo + Composition

This is common in real applications.

Example

const Card = memo(function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
});

👉 Reusable + optimized

---

Common Mistakes

❌ Overusing React.memo

Not every component needs memoization.

---

❌ Creating Huge Components

Break UI into reusable pieces.

---

❌ Deep Prop Drilling

Use:

• Context API
• Composition patterns

---

Best Practices

✅ Use React.memo Carefully

Optimize only where needed.

---

✅ Prefer Composition

Build UI using reusable blocks.

---

✅ Keep Components Small

Small components:

• Easier to test
• Easier to reuse

---

Final Summary

React.memo

✔ Prevents unnecessary re-renders
✔ Improves performance
✔ Best for stable props

---

Composition

✔ Builds reusable UI
✔ Cleaner architecture
✔ Recommended React pattern

---

💡 Found this helpful? Subscribe for simple React guides, real-world examples, and interview preparation tips. Happy Coding!