React component: A complete overview of its types and differences

React lets you define components as classes or functions. Components defined as classes currently provide more features. There are many different approaches to write a react component. When you go through lots of tutorials, you will notice that react components are varying greatly from tutorial to tutorial. Moreover, a few of the old types of react components are still alive today.

Yet, every component is derived from functional and class component, which is the basic thing. Most of the developers are also confused with the difference between the types of components and which should be used for better performance. So now, we want to give React beginners a complete overview of types of react components. In the end, you should be able to identify them.

But first, let’s go through some definitions.

What is React Component?

React component

This is one of the core building blocks of React apps. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. Each component returns/renders some JSX code and it defines which HTML code React should render to the real DOM in the end. JSX is not HTML but it looks a lot like it.

Components usually come in two types, functional components and class components. But today, we will also be talking about pure components and higher-order components.

Types of react components

React component

#1. Functional component

The first in the different types of react components is Functional component. To put it in the most simple way, functional components are javascript functions. By writing a javascript function, we can create a functional component in React Apps. It does not natively have state or lifecycle methods, but this functionality can be added by implementing React Hooks. Functional components are usually used to display information. They are easy to read, debug, and test. Below is an example:

function Title()
return <h1>I am Title</h1>;

To make React efficiently, we use functional component only when we are sure that our component does not require to interact with any other components. This kind of react component does not require data from other components. They can be declared with regular JavaScript functions. You can also pass in props to the function and use them to render data in the JSX code.

#2. Class component

The second type in types of react components is Class component. Class components have previously been the most commonly used among the four component types. This is because class components are able to do everything a functional component does but more. They are similar to the functional component but has some additional features that make class component a little more complex than the functional components. Unlike functional components, class components are consist of… well, a class.

They can utilize the main functions of React, state, props, and lifecycle methods. The functional components also do not care about the other components in your app whereas the class components can work with each other. We can pass data from one class react component to other class components.  Below shows an example of a class component in React:

 class Title extends React.Component
           return <h1>I am Title</h1>;

#3. Pure component

The next types of react components is Pure components. They are like better functional components. Components that only return a render function are optimal for pure components to shine. Pure components are for providing optimizations. They are the simplest and fastest components we can write. They do not depend or modify the state of variables outside its scope. Hence, this is why pure components can replace simple functional components.

React is usually re-rendered when:

  • setState() is called
  • props values are updated
  • forceUpdate() is called

But in pure components, they do not re-render blindly without considering the updated state and props. Thus, if state and props are the same as the previous state and props, then the component does not re-render. This is very useful when you do not want to re-render a certain component while the props and state remain the same.

#4. Higher-order component

Higher-Order Components (HOCs) is one of the types of react components. It is a popular advanced React pattern, are an alternative for React Mixins to deploy reusable logic across React components. They are popular patterns to deploy reusable logic and functionality across the React component. This component is also prominent in React applications. They are also used to share logic with other components.

Some examples of HOCs are comments. When a user creates a comment, the backend will save it. Then using React, retrieves the comments with fetch and place the data in the component’s state as an array. Then on your component that renders these comments, you would map over your comments array and transform each comment into a comment component.

#5. Other types of react components

That is to say, there are other types of react components that go similar to these four components and today we will discuss them as well.

  • Dumb components: This react component is just like a stateless functional component. A stateless component is much more efficient than a stateful one because it doesn’t require as many computer resources to render.
  • Smart components: This is any class component that manages its own state. Smart Components are stateful components and work similarly to class components.
  • Presentational components: They are like a stateless functional component that takes props and renders UI. Stateless functional components are certainly plain JavaScript functions that do not have states.
  • Container components: This is a class component that provides the data and behavior to presentational or other container components. In other words, this kind of react component mainly concerned with how things work.

Final words

That should be it! Here is the complete overview of the different types of React components. Basically, there is an insignificant difference in render time, yet there is the main difference is the amount of code. So, it’s perfectly fine to use any kind of react component you want, just use it wisely and profitably for your eCommerce website. If you have yet understood any types of React components, let us know at HERE. Furthermore, don’t miss the great services that are very helpful for your business. So let’s explore it right now at ArrowHiTech Website.