ReactJS Components
By: Walter Aab
Tags: Flatiron School, React Redux, Beginner, Single Page Applications, Reactjs

The component concept is something quite simple to understand, basically it is a visual software element that has its own state, receives some properties and implements its own rendering logic. There are several different kinds of components and can be differentiated based on their behavior and type.

In this blog I will do my best to list and briefly explain the types of components that can be used in React. Initially breaking the categorizations into two, the behavioral categorization and the structural categorization.

Types of Behavioral Components

Depending on the type of behavior that the component is going to perform, we can differentiate the components into Stateless, Statefull, and Pure Components or HOC. Let’s get to know and understand each of these types of components:

Stateful Component

These types of components are used mainly when you are displaying a form to the user and would like to show the changes in realtime on the screen. The main characteristics of this type of component is that they use encapsulation in classes, they have a state that they define and update, and each change in both props and state calls the render method.

Stateless Components

These components are a simplified version of the most common component: Stateful. These types of components are defined as functions in vanilla js and do not have or work with state. The only data that this type of component works with is with the received props. The advantages of this type of component is that they are simple to write, easily testable and improve performance.

Here you have an example of a stateless component:

Pure Component

This type of component is similar to the stateful in terms of its definition. They are also implemented as classes, but in this case they will extend from React.PureComponent. Like stateless components, this type of component does not define a state, being purely just a visual component. These types of components are optimized for better rendering performance, since they only change if they detect a change in their props and these are different from the previous values.

The implementation is identical to the Statefull, only that they contain state and extend React.PureComponent.

Higher Order Components or HOC

Higher Order Components (HOC) are functions that take another component as a parameter, extending its functionality and returning a new component with extended functionality. If the properties of the HOC change, the HOC will render again and update the component wrapped in it.

These types of components are used to implement common functionalities such as pagination, intercept and modify the rendering, make calls to APIs and feed the wrapped component, control over the inputs of forms.

This type of component is used in libraries widely used in the React ecosystem such as react-redux and react-redux-form. Basically it is a good method to decouple functionality, extend the functionality of our components and reuse the code throughout our application

Below you can see an example taken from the Internet:

Once the HOC has been defined, it can be used in all the components we need.

There are several articles that speak in depth about these types of components, since they are the ones that require greater complexity and attention when implementing them. Below is a link to the documentation for this type of component, and examples of use:

https://reactjs.org/docs/higher-order-components.html#use-hocs-for-cross-cutting-concerns

Types of structural components

These types of components do not technically correspond to any API element, class or function in React, they are just purely conceptual. The purpose of this categorization is to organize our application so that it is simpler and more intuitive to develop. This categorization is not a React standard but a community standard and allows us to define an architecture in our applications.

Presentational Components

These types of components should only focus their efforts on how the UI should be rendered. These types of components can be made up of other visual elements and often include styles and classes. All the data involved in its rendering must be received through props, so it must be independent of calls to external services. These types of components are usually of the Stateless type since they do not need state, and must manage the actions by passing them to parent components through their props.

Container Components

These components must put aside the interface and take care of the functional part, they are simply containers for other components and are in charge of managing the interaction logic and the data logic, making the necessary calls to external services. Unlike Presentational Components, Container Components usually manage their own state, being an important node in the hierarchy of the component tree.

This wraps up a run through the different categorization and types of Components in React. I hope you found this information helpful.