The React components (Functional, Class & HOC)

The React components (Functional, Class & HOC)

React is a declarative, flexible and reusable JavaScript library used to build user interface which allows you compose complex UI’s from small pieces of code called "components" . These components can be said to be the backbone of React and in this article, I will discuss 3 React components.

What are React Components?

Components are the building blocks of any React app and a typical React app will have many of these. They are independent reusable bits of code that functions to isolate and return JSX(which looks a lot like HTML elements) via render functions.

download.png

Types of React components

I will talk about 3 out of all the React components

  1. Functional component

  2. Class component

  3. Higher-Order Component

    Functional Components

    Functional components are functions that take in props and return JSX. Functional components are usually used when a component is not expected to interact with other components. They do not have the state or lifestyle method(componentDidMount(), componentDidUpdate(), and componentswillUnmount())but can be added by implementing React Hooks. They can be simply said to be JavaScript functions and are easy to debug, read and test.

import React from 'react';
const Roses = () => {
   return (
      <div>
         <p>I love roses 🌹 !</p>
      </div>
   )
}
export default Roses;

As in the example above, this component can be used to Pass in props to the function and use them to render data in the JSX code.

Class Components

The class component has been the most commonly used components among all four components. This component acts just like the functional components except, it has additional features that make it a bit Complex. It can utilize the main function of React, state, props and lifestyle methods. This components usually consist of a class

images.jpeg

import React from 'react';

class Roses extends React.Component
 {
    render(){
          return <h1>I am Rose</h1>;
    }
}

export default Roses;

Higher-Order Components

The HOC is an advanced technique in React for reusing component logic. They are not part of the React API. These are components that take in component as input and return one or multiple new components as output with extended functionalities. They are a pattern that emerges from React’s compositional nature.

Note that in HOCs:

  1. We don’t modify or mutate components. We create new ones.

  2. A HOC is used to compose components for code reuse.

  3. A HOC is a pure function. It has no side effects, returning only a new component

import React from 'react';
// Take in a component as argument WrappedComponent
const higherOrderComponent = (WrappedComponent) => {
// And return another component
  class HOC extends React.Component {
    render() {
      return <WrappedComponent />;
    }
  }
  return HOC;
};

We can now see that the HOCs takes the component and returns another component, this way, we can create a HOC out of that component and use it wherever we like when we need to reuse a component.

Conclusion

Thumbs up 👍🏽 !!! for coming this far. I am sure you now understand each of these components and why each one is different from the other.