## What is composition

Let me demonstrate with a small example:

```tsx
// no composition
<AlertDialog
  open={true}
  title="Don't use composition!"
/>

// with composition
<Dialog open={true}>
  <Title>Do use composition!</Title>
  <Button>Close</Button>
</Dialog>
```

At first glance the first example seems like a good idea right? It's shorter and you've completely hidden that button component inside the `AlertDialog`, so you dont have to worry about it anymore!

But now, we need another special alert dialog that can have an svg icon in the title! This means we have to change the interface of `AlertDialog` so the title can take either a `string` or a `ReactNode`.

```tsx
// no composition
<AlertDialog
  open={true}
  title={<><SvgAlertIcon /> Don't use composition!</>}
/>

// with composition
<Dialog open={true}>
  <Title><SvgAlertIcon /> Do use composition!</Title>
  <Button>Close</Button>
</Dialog>
```

Or even worse, now the client also wants a special alert dialog (a confirmation dialog) that has a "cancel" and an "ok" button. This means we have to extensively modify the code inside `AlertDialog` and we need to put conditional logic there, so it can either render a "close" button or a "cancel" and "ok" button.

```tsx
// no composition
<AlertDialog
  open={true}
  title="Are you sure you don't want to use composition?"
  asConfirmationDialog
/>

// with composition
<Dialog open={true}>
  <Title>Are you sure you want to use composition?</Title>
  <Button>Cancel</Button>
  <Button>Ok</Button>
</Dialog>
```

You can imagine, the code inside `AlertDialog` will get more complicated over time as requests for more features are made, meanwhile in the composition, NONE of the components have changed internally.

## Why is composition important

From the above example, you can already see that composition is important because without it, the complexity of our components will grow exponentially over-time until they're no longer maintenable. But not using composition in React also violates some well known principles that you may remember from object oriented programming (the SOLID principles).

### Single responsiblity

Sticking with the example of the alert dialog. We can see that the single responsibility principle is being violated. You expect the component to only be responsible for showing an alert dialog, but now it also contains logic to render a title and logic to show different buttons based on the `asConfirmationDialog` flag.

### Open/closed principle

The violation of the open/closed principle can also be applied to React components. We need to make modifications to the internal logic of `AlertDialog` component if we want to extend it (it should be closed for modification and open for extension).

Let me demonstrate with a small example:...