Types of ReactJs Components in Programming

What Are Components in ReactJs?

The components basically refer to the fundamental unit and building blocks of React. To make it easier to understand, just like anything in the world is made up of atoms, the components are just the constituents of ReactJS. Any application or website being developed using ReactJS will be made up of the different units which are called the components.

In the image shown above, you can find several components on the UI of the website. The Menu bar is one component while the left Featured column is another. The cookie box is also a component and the main body providing all the information is again just another. So the whole UI is made up of the different components to make the website useful for us. The UI of the website thus can be considered as the parent component.

Types of ReactJs Components in Programming 

1. Functional Component 

Functional components can be created simply by writing the Javascript functions. To be specific, the functional components are those functions that take the Props in and return the JSX. The functional components might or might not be able to receive the data in form of parameters. Moreover, the functional components don’t have the lifecycle methods or state however they can be added by simply implementing the React Hooks. The functional components are always easy to debug, read and test. 

// Functional Component Example
import React from 'react';
const HelloWorld = () => {
   return (
      <div>
         <p>Hello Emizen!</p>
      </div>
   )
}
export default HelloEmizen;

In the above code image, it is a simple component carrying the constant variable “Hello Emizen”. The constant variable is assigned to the arrow function that returns the JSX. The functional components don’t require to be an arrow function and they can also be simply declared with the regular JavaScript functions. At the same time, Props can also be passed into the function and thus used to render the data in JSX code.

2. Class Component 

The Class component is the most used component among all the types. The reason is that the class component has the capability of performing every function of the functional component and at the same time some additional capabilities as well. It can efficiently make use of the main functions of React, props, state and lifecycle methods as well. However, the class components are comparatively more complex compared to that of functional components. The data can be passed from one class component to another class component very easily.

// Class Component Exampleimport React from 'react';class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <p>Hello Emizen!</p>
         </div>
      )
   }
}export default HelloEmizen;

It can be observed in the above example that the class component uses the extends React.Component after the class Hello Emizen. Then, it also requires the render() method to return the JSX code. In the class component, one can declare a state, set it to the JavaScript object, and use props to be in the initial stage and change the state in the lifecycle methods. It will require the React Hooks to perform these actions by functional component.

3. Pure Component

Pure components are the most simple and fast components that someone can write. As pure components don’t modify or depend on the state of different variables outside of their scope, they can easily replace the simple functional components. The components which merely return the render function are most adequate for pure components. The biggest use case of the Pure component is to provide optimizations. 

The big difference between the React.Component and React.PureComponent is that the pure component exhibits shallow comparison on the state change. The pure components automatically manage the shouldComponentUpdate().

React Components are re-rendered mostly when: 

• setState() Is called
• forceUpdate() Is called 
• props Values are updated

4. Higher-Order Components

Higher-order components also known as HOC are less like a React component and more like a pattern, the result of React’s Compositional nature. The main use case of HOC is to share the logic with other components.

// HOC Example
import React from 'react';
import MyComponent from './components/MyComponent';
class HelloEmizen extends React.Component {
   render() {
      return(
         <div>
            {this.props.myArray.map((element) => (
               <MyComponent data={element} key={element.key} />
            ))}
         </div>
      )
   }
}
export default HelloEmizen;

The above image of code has the simple component to describe the higher-level component. Here the key code is this.props.myArray.map((element) => (<MyComponent />). This function returns the components. The number of components are simply dependent on the number of elements in the array which are called HOC. The function takes an array from state and thus maps each element in the array by transforming every element into the React Component.  

Followings are the Higher-Order Component Simple Rundown: 

1. Get the data from props or state
2. Map over the array and return the Reach component for every element.

How to Render a ReactJs Component?

Following steps can be followed to render a ReactJS component: 

• First of all, an ES6 class is created with the same name which extends React.Component. 
• A single empty method is added to it known as render().
• Body of the function is moved into the render() method.
• Replace the props with this.props in render() body.
• In the end, delete the remaining empty function declaration.

React Nesting Components

One of the best things about React is that the components can nest inside one another. This feature helps significantly to create a complex User Interface. Here, the child components are nested inside the parent components. The nesting of components in one another is referred to as internal and external.

• Export: when a particular module or file is exported and used in another module, it is called Export. 
• Import: when a particular module or file is imported and used in the existing module, it is called import.

React Component Lifecycle

The React web apps are basically the collection of the different components which are independent and run based on interactions made with them. Each of these components has its own lifecycle. Life Cycle refers to the series of methods that reinvoke in the different stages of the component’s existence. 

Any React component basically has the following three stages:

1. Mounting

Once the initialization of components has been completed, the component is then mounted on DOM and rendered on the webpage. Here, React follows the default procedure only for the Naming Conventions of the predefined functions. The functions that contain “Will” represent before some specific phase. Similarly, the function that contains “Did” represents after the completion of the phase. The mounting phase of the components consists of the following two functions: 

• componentWillMount() Function: this function is invoked before the component is mounted on DOM. 
• componentDidMount() Function: opposite to the previous one, this function is invoked after the component is mounted on the DOM. 

2. Updation

Updation is basically the phase in which the states and props of a component are updated followed by the event or command from the user such as pressing the key, clicking on the mouse, etc. It helps the active web pages to behave according to the needs and commands of their users. 

3. Unmounting 

It is the completion stage of the component lifecycle. In this phase, the components are unmounted from the DOM. Following function is the only member of this function: 

componentWillUnmount() Function: the function is invoked just before the component is completely unmounted from DOM. It occurs before the component is removed from the page and thus this donates the end of the life cycle.

We hope this post gave you a basic idea of types of React components and how they can be used. Emizentech is a leading app development firm that develops web, native and hybrid mobile apps. So, if you ever need professional ReactJs developers then do get in touch with us.