React: 4 Types of Components to Rule Them All

by admin admin Date: 20-08-2019 react javascript coding


If you have already worked with React, you will probably have found terms like "dumb components", "stateless components" or "high order components" which serve to describe different ways of defining and creating components in an application.
The aim of this article is to explain the different types of components we can create in React and how we can use them to make our code easier to understand and maintain.

From zero

When we create a project in React by means of the create-react-app instruction we will start from a base component in which different functionalities and characteristics are grouped like the render function, the props, its own state or the lifecycle events or its own context:

However, the components that we will normally use will only use a part of all those API's; in fact, we can separate them into two big groups:

1. Those components that use the render function along with the props and the associated context

2. The components that use the render function, the state and the lifecycle events

It is from this point that the first two types of components arise.

Presentational components

This type of components, probably the most basic that we can define, and that is also known as stateless components, is only in charge of painting the elements based on the props received by the other components where they appear embedded. Hence, they also receive the nickname of stateless since they themselves do not store any kind of state, limiting themselves to presenting the data on screen. In fact, we will often define them directly as functions that return the corresponding HTML without the need to extend the React.Component class.

The most obvious advantage of separating these components from the rest is the ability to reuse them whenever you want without having to write the same code over and over again.

Example:

const Box = props => {props.name}

Container components

On the other hand, container components are those components that do use the API state to establish the logic and operation of our application, hence they are also known as state components.
This type of components, therefore, will be in charge of making calls to external API's, connecting to Redux or establishing the logic to be carried out depending on the actions that the user carries out on the interface.

Example:

class ContainerBox {
  constructor() {
    super();
    this.state = { name: "Pluto" }
  }
  render() {
    return 
  }
}

As you can see, the previous Box component can be reused wherever we want, so it's very easy to reuse code while delegating logic to the containers.

However, how could we also reuse our ContainerBox component in the same way we have done with the Box component? This is where the third type of component (or pattern) comes in.

High order components

When we speak in React of high order components, we speak of components that receive a component as a parameter and return a new component, usually encapsulating the received component with additional functionality. In fact, this pattern is used in the react-redux library when we create a component using the connect(MyComponent) instruction.

Using this pattern can be confusing at first but the moment we start to feel comfortable with it is one of the most powerful we can employ in the design of our application.

Returning to our example, to define a high order component on our ContainerBox we could write the following code:

function ContainerBoxHoc(AnyBox) {
  return class ContainerBox extends React.Component {
    constructor() {
      super();
      this.state = { name: “Pluto” }
    }
    render() {
      return 
    }
  }
}
const ContainerBox = ContainerBoxHoc(Box);
function SpanBox = props => {props.name}
const OtherContainerBox = ContainerBoxHoc(SpanBox)

As you can see, we can create as many ContainerBox as we want and each of them can paint the type of Box we need. Logically this is a very simple example, but if you browse through the official documentation you will find other more complex ones where you can see the advantages of the high ordered components.

Render props

Finally, the last type of component or pattern (I prefer in this case to use this last term) that we can use when defining the structure of our application is what is known as render props.

The characteristic of this type of components is that they receive a function through the props (which returns an element of React) and that will be the one that they use inside their own render function to paint on screen. For example, our component ContainerBox could be defined as follows:

class ContainerBox extends React.Component {
  constructor() {
    super();
    this.state = { name: “Pluto” }
  }
  render() {
    return this.props.renderBox(this.state);
  }
}
const Box = props => < div >{props.name}< / div >
const ContainerBoxWithBox = (
 < ContainerBox renderBox={state => (< Box {…state} />)} />
);

As you can see in this case it is an external function to the component that establishes what is painted and how it is painted, limiting the ContainerBox component to establish the rest of the logic and use this property as a return value of its own render function.

Conclusion

Knowing these 4 types of components (or patterns) you will be able to raise the structure of your application in a way that will allow you to reuse many components and make the code much more maintainable, something that in large applications is thankful.
If you are interested in learning more about the different components we recommend the following talks:

 
 
 
by admin admin Date: 20-08-2019 react javascript coding hits : 2528  
 
 
 
 

Related Posts