The Project | About Us | Contribute | Donations | License

HOME

In React, composition and inheritance are two fundamental concepts for building reusable components. React encourages the use of composition over inheritance to create more flexible and maintainable code. This section will explore both concepts, compare them, and provide practical examples to illustrate their usage.

Key Concepts

Composition

Definition: Composition is a design principle where smaller components are combined to form larger, more complex components.
Usage: It allows for better code reuse and separation of concerns.
Advantages:
- Easier to understand and maintain.
- Promotes reusability and flexibility.
- Simplifies the component hierarchy.

Inheritance

Definition: Inheritance is a design principle where a class (child) inherits properties and methods from another class (parent).
Usage: Less common in React, as it can lead to more rigid and complex code structures.
Disadvantages:
- Can make the code harder to understand and maintain.
- Reduces flexibility and reusability.
- Can lead to tightly coupled components.

Practical Examples

Composition Example

Let's create a simple example using composition. We'll build a Card component that can be composed with other components like Header, Content, and Footer.

// Header.js
import React from 'react';

const Header = ({ title }) => {
  return <h1>{title}</h1>;
};

export default Header;

// Content.js
import React from 'react';

const Content = ({ text }) => {
  return <p>{text}</p>;
};

export default Content;

// Footer.js
import React from 'react';

const Footer = ({ footerText }) => {
  return <footer>{footerText}</footer>;
};

export default Footer;

// Card.js
import React from 'react';
import Header from './Header';
import Content from './Content';
import Footer from './Footer';

const Card = ({ title, text, footerText }) => {
  return (
    <div className="card">
      <Header title={title} />
      <Content text={text} />
      <Footer footerText={footerText} />
    </div>
  );
};

export default Card;

// App.js
import React from 'react';
import Card from './Card';

const App = () => {
  return (
    <div>
      <Card title="Card Title" text="This is the card content." footerText="Footer Text" />
    </div>
  );
};

export default App;

Inheritance Example

While inheritance is not commonly used in React, let's see a simple example for comparison. We'll create a Button component and extend it to create a PrimaryButton component.

// Button.js
import React from 'react';

class Button extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}

export default Button;

// PrimaryButton.js
import React from 'react';
import Button from './Button';

class PrimaryButton extends Button {
  render() {
    return <button className="primary">{this.props.label}</button>;
  }
}

export default PrimaryButton;

// App.js
import React from 'react';
import PrimaryButton from './PrimaryButton';

const App = () => {
  return (
    <div>
      <PrimaryButton label="Click Me" />
    </div>
  );
};

export default App;

Comparison Table

Aspect	Composition	Inheritance
Flexibility	High	Low
Reusability	High	Low
Complexity	Low	High
Maintenance	Easy	Difficult
Component Coupling	Loose	Tight
Preferred in React	Yes	No

Practical Exercise

Exercise: Refactor Using Composition

Refactor the following code to use composition instead of inheritance.

// Original Code with Inheritance
import React from 'react';

class Button extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}

class PrimaryButton extends Button {
  render() {
    return <button className="primary">{this.props.label}</button>;
  }
}

const App = () => {
  return (
    <div>
      <PrimaryButton label="Click Me" />
    </div>
  );
};

export default App;

Solution

// Refactored Code with Composition
import React from 'react';

const Button = ({ label, className }) => {
  return <button className={className}>{label}</button>;
};

const PrimaryButton = ({ label }) => {
  return <Button label={label} className="primary" />;
};

const App = () => {
  return (
    <div>
      <PrimaryButton label="Click Me" />
    </div>
  );
};

export default App;

Conclusion

In this section, we explored the concepts of composition and inheritance in React. We learned that composition is the preferred approach in React due to its flexibility, reusability, and ease of maintenance. By using practical examples, we demonstrated how to implement both concepts and highlighted the advantages of composition over inheritance. Understanding these principles will help you build more robust and maintainable React applications.

Composition vs Inheritance

Key Concepts

Composition

Inheritance

Practical Examples

Composition Example

Inheritance Example

Comparison Table

Practical Exercise

Exercise: Refactor Using Composition

Solution

Conclusion

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application