**Question**: Should I use inheritance in React?

**Answer**: No. Inheritance is a mechanism that was used in lots of different UI toolkits in the past, e.g. Swing, MFC, GWT, etc. But it is an anti-pattern in React.

Let's take a step back though, what is inheritance in React. Here is an example:

```ts
class Button extends React.Component { 
   render() { 
      return (<button>...</button>);
   }
}

class IconButton extends Button {
   render() { 
      return (<button><i>...</i>...</button>);
   }
}
```

In this case we have declared a `Button` component, as a class, and then derived the `IconButton` from that original `Button` component.

The preferred method is to use composition, instead. If we continue with class components it would look something like this:

```ts
class Button extends React.Component { 
   render() { 
      return (<button>...</button>);
   }
}

class Icon extends React.Component { 
   render() { 
      return (<i {...this.props}>...</i>);
   }
}

class IconButton extends React.Component {
   render() { 
      return (<Button><Icon /></Button>);
   }
}
```

The `IconButton` component is **composed** of the `Button` and `Icon` components. And composition is preferred over inheritance in React.

Of course, in my opnion, you should not be using class components in React. They aren't officially deprecated but the updated React.dev documentation has no class components in it.

In functional components composition looks like this:

```ts
function Button() {
  return (<button>...</button>);
}

function Icon() {
  return (<i>...</i>);
}

function IconButton() {
  return (<Button><Icon /></Button>);
}
```

Should you be using inheritance or composition in your React applications?