What is component composition, and why does React prefer it to inheritance?

React JSX, components and props · Experienced

Model answer

Composition means building complex components by combining simpler ones: passing children, passing components or render functions as props, and wrapping behaviour in custom hooks. React favours it because it is flexible and keeps components decoupled, while inheritance creates tight links between classes.

For example, instead of a SpecialButton extending Button, make a Button that takes props and children, and wrap it where needed.

Learn this topic

React Components and Props Explained with Examples in the course React.js Full Course: Beginner to Advanced.

Sign in to add your own answer.

More questions

• What is JSX?
• What are the rules of JSX?
• What is a component? What is the difference between a function and a class component?
• What are props, and can a component change its own props?
• What is the children prop?
• How do you render a list in React, and why do you need a key?