No this is not just a React.js composition.

Composition in oil painting

Composition is another form of relation like inheritance or implementation.

As a frontend developer, I have heard a lot about using composition compared to inheritance with React but the question is irrespective of whether the Meta team decided to use composition or some other model, do we understand what composition is and how composition solves problems like:-

• Data encapsulation.
• Tight coupling of classes.
• Code reusability.

If we look more deeply then we can see that these are all coding principles that we either hear or read somewhere but never give attention to.

And if we know about Association, Aggregation, and Composition then we also know that Composition is a kind of Aggregation and Aggregation is a type of Association, the point is Composition is a most refactored form of relation where if inheritance says is a relationship then composition says has a relationship i.e.,

An employee is a User vs An employee has an Identity

In Composition, not only does one object have reference to another but also manages its lifecycle.

Again one of the best examples is React :P

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

Here Dialog can be a welcome dialog, notification dialog, or confirmation dialog, and these different kinds of dialog manage the lifecycle in their way.

Like react mentioned:

In React, this is also achieved by composition, where a more “specific” component renders a more “generic” one and configures it with props

In the end, if we think about why Composition then it makes sense because of its flexibility, re-usability, and maintainability