Composition vs Inheritance and Thinking in React.js

What makes React so powerful is its’ composition model and most newer developers lean towards inheritance. While inheritance is not bad, using import is more useful and less restricting. Compostion of behavior makes your file structure and files easier to read and code becomes more simple and flexible.

React supports the passing of arbitrary children into other components by nesting the JSX, meaning that components that don’t know their children beforehand. The children prop is the best case use for these components.

The children prop allows children elements to be passed into the containment component. You can also specialize the props passed into component to have a “specialized” component render a more generic one. Such as:

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!" />  );
}

You can specify what you want passed into the component by passing them into the components props. In this case, WelcomeDialog is a special case of Dialog. Dialog is a generic component that can render many other specific case components such as WelcomeDialog. Passing in “Welcome” into the title prop and “Thank you for visiting our spacecraft!” into the message prop will have those rendered into the Dialog component.

While you can create an inheritance heirarchy within a React app, more often than not, using containment and composition will be your best bet in making sure your code is uncluttered. Using composition will also help you maintain and make changes to your application in the future. Props and composition give a developer flexibility to customize the look and behavior of a component in a safe and easy way.

Understanding the way React’s component composition is used and how it benifits the developer will help you produce applications faster and not have to worry about how you can get information from point A to B.

“Thinking in React” helps you visualize your application and it’s architecture. When visualizing your app you should try to think of it as a puzzle with a bunch of pieces and how they will fit together. When creating the application, instead of thinking of it as a whole think of it as sections. Each component will be a section of the puzzle that needs to be put together.

When creating something like a todo list, you’ll have a form with an input and a submit button, a list of of the todos, each individual todo, and buttons to clear or complete the todo. The form will be its own section and the list will be another with smaller sections, each todo, within it. With this information and visiualization you can start to picture your heirarchy and what will be a child component in the heirarchy.

• Todo Table
• Todo Input
• Todo List
• Todo
• Complete Button

From here you can see that TodoTable will be your top level component that will encapsulate the rest of the components. The input will be its own component and the list will be one component that will contain the todos and the complete button. When this heirarchy is visualized or written out somewhere you can start creating the application, but you will want to think about state and where it should live within the application.

You will want to think about each peice of your application and whether or not it will be rendering something based off of state and find a common component that renders based off the same state. If you do find a common owner than a higher component should own the state, and if a point is come to where the state can not live while making sense then it is alright to create a component solely to hold that state.

If you take these precautions and lay out your application before just going in and building (which is the best part obviously), you’ll see yourself start flying through the application. Your lines of code will start to shrink, you’ll become more explicit with your writing, your readability will increase, and your code will become reusable (which is the BEST part of React). Readability is the number one thing in coding, there will only be one person or a small team writing the code, but hundreds of other people will be reading it.

Start thinking in React.

Resources

React.js Docs — https://reactjs.org/docs/composition-vs-inheritance.html

Code like this. — https://codelikethis.com/lessons/react/composition-vs-inheritance