Composition vs Inheritance in React

What You’ll Learn 📚

• The core concepts of composition and inheritance in React
• Key terminology with friendly definitions
• Simple and progressively complex examples
• Common questions and comprehensive answers
• Troubleshooting common issues

Introduction to Composition and Inheritance

In React, composition and inheritance are two fundamental concepts for building reusable components. While both aim to promote code reuse, they do so in different ways. Let’s break it down:

Key Terminology

• Composition: A design principle where components are composed together to build more complex UIs. Think of it like building blocks that fit together to create something larger.
• Inheritance: A traditional object-oriented programming concept where a class derives properties and behaviors from another class. In React, this is less common.

💡 Lightbulb Moment: In React, composition is often preferred over inheritance because it aligns better with React’s component-based architecture.

Simple Example: Composition

// Simple Button Component
function Button(props) {
  return {props.label};
}

// App Component using Composition
function App() {
  return (
    

      
Welcome to My App
      
    
  );
}

export default App;

Progressively Complex Examples

Example 1: Nested Components

// Card Component
function Card(props) {
  return (
    

      
{props.title}
      {props.children}
    
  );
}

// App Component
function App() {
  return (
    
      
This is some content inside the card.
    
  );
}

export default App;

Example 2: Composition with Multiple Children

// Layout Component
function Layout(props) {
  return (
    

      
{props.header}
      
{props.main}
      
    
  );
}

// App Component
function App() {
  return (
    Header Content} 
      main={
Main Content
} 
      footer={
Footer Content
} 
    />
  );
}

export default App;

Example 3: Avoiding Inheritance

// Base Component
class BaseComponent extends React.Component {
  render() {
    return 
Base Component
;
  }
}

// Derived Component
class DerivedComponent extends BaseComponent {
  render() {
    return 
Derived Component
;
  }
}

// App Component
function App() {
  return (
    

      
      
    
  );
}

export default App;

Common Questions and Answers

1. Why is composition preferred over inheritance in React?

   Composition aligns better with React’s component-based architecture, allowing for more flexible and reusable components.

2. Can I use inheritance in React?

   While possible, it’s not recommended. Composition provides a more natural way to build components in React.

3. How do I pass multiple children to a component?

   Use props to pass different elements as children, as shown in the Layout example.

4. What are props.children?

   It’s a special prop that allows you to pass child elements directly into a component.

5. How do I troubleshoot ‘props is undefined’ errors?

   Ensure you’re passing props correctly and accessing them in the component.

Troubleshooting Common Issues

• Issue: ‘props is undefined’

  Ensure you’re passing props correctly and accessing them within the component’s function or class.

• Issue: ‘Cannot read property of undefined’

  Check if you’re trying to access a property on an undefined object. This often happens if props aren’t passed correctly.

🔗 Additional Resources: Check out the official React documentation for more details on composition vs inheritance.

Practice Exercises

1. Create a ProfileCard component that uses composition to display a user’s name, avatar, and bio.
2. Refactor an existing component in your project to use composition instead of inheritance.

Remember, practice makes perfect! Keep experimenting with these concepts, and soon you’ll be composing React components like a pro! 🌟