In React, composition and inheritance are two fundamental concepts for building reusable components. However, React leans more heavily on composition over inheritance. Let’s explore both concepts and understand their use in React.
Composition
Composition involves building components by combining smaller, reusable components. This approach promotes code reuse and simplicity. Here are a few ways to achieve composition in React:
Containment
Components can contain other components using the children prop. This is useful when you want to build a generic “container” component.
// Container.js
import React from 'react';
const Container = ({ children }) => {
return <div className="container">{children}</div>;
};
export default Container;
// App.js
import React from 'react';
import Container from './Container';
const App = () => {
return (
<Container>
<h1>Hello, World!</h1>
<p>This is a paragraph inside the container.</p>
</Container>
);
};
export default App;
Specialization
You can create specialized components that use more generic ones as a base. This is similar to the “template method” pattern.
// Dialog.js
import React from 'react';
const Dialog = ({ title, message }) => {
return (
<div className="dialog">
<h1>{title}</h1>
<p>{message}</p>
</div>
);
};
export default Dialog;
// WelcomeDialog.js
import React from 'react';
import Dialog from './Dialog';
const WelcomeDialog = () => {
return <Dialog title="Welcome" message="Thank you for visiting our website!" />;
};
export default WelcomeDialog;
// App.js
import React from 'react';
import WelcomeDialog from './WelcomeDialog';
const App = () => {
return (
<div>
<WelcomeDialog />
</div>
);
};
export default App;
Inheritance
In traditional object-oriented programming, inheritance is a way to create a new class that is based on an existing class. While React supports ES6 classes and inheritance, it encourages composition over inheritance for building components.
Using Inheritance
Although not common, inheritance can be used to extend components. However, it is usually not recommended because it can lead to more complex and less flexible code.
// BaseComponent.js
import React from 'react';
class BaseComponent extends React.Component {
render() {
return <div>{this.props.children}</div>;
}
}
export default BaseComponent;
// EnhancedComponent.js
import React from 'react';
import BaseComponent from './BaseComponent';
class EnhancedComponent extends BaseComponent {
render() {
return (
<div>
<h1>Enhanced Component</h1>
{super.render()}
</div>
);
}
}
export default EnhancedComponent;
// App.js
import React from 'react';
import EnhancedComponent from './EnhancedComponent';
const App = () => {
return (
<EnhancedComponent>
<p>This is the content inside the enhanced component.</p>
</EnhancedComponent>
);
};
export default App;
While both composition and inheritance are important concepts, React embraces composition over inheritance for building components. Composition allows for more flexible and reusable code by combining smaller components, while inheritance can sometimes lead to more rigid and complex structures. For most cases in React development, prefer composition through containment, specialization, and hooks.
