Composition Over Inheritance in React

React brings an OOP approach along with some functional programming best practices to front end engineering on the web.

It is not the only library to offer composable components as a central feature in developing your Javascript Front End, but it is definitely the most used solution today.
One thing that makes React unique is how close it is to just Javascript.
This makes it easier to compose a layout in programmatic fashion, opening us to greater utilization of programming paradigms like OOP, FP.

Given the class structure of react components (or containers in a two dimensional smart vs dumb UI component structure), one is left with many of the usual OOP concerns when crafting their program.
One such concern is the concept of composition vs inheritance.
This is essentially a design choice, whereby the developer sees two ways to solve the problem of sharing state and capabilties of parent components with child components.

Composition is the suggested best practice for building complex UI classes.

The way that props can be accessed in child components allow multiple components to be pieced together, giving some components the job of handling state and the others the job of rendering the UI.

By utilizing composition, we gain several advantages. One is that UI’s sometimes have dynamic elements, passing a function as a prop from a parent to a child allows the developer to compose multiple possible UI from the a set number of components.