React Components : Functional and Class-based

Sonny Recio

Print 6 min read

29 Aug 2022

Intermediate

7.25K Views

Now that we’re done with defining JSX and knowing the core concepts of React, it’s time to delve deeper into one of the most important parts of React: Components.

In my previous article, I’ve mentioned that components are what make React lovable with the use of JSX syntax structure and one of the most popular Javascript libraries to date so it’s loved by lots of developers around the globe. So, without further ado, what is a React Component and what role does it serve in the ecosystem?

Need of Components

Now you might ask, what’s the need for components? Why do we have to use components as we speak? Glad you asked!

A Component in React is considered as the backbone or the essentials of any React application, moreover, It allows us to create or build the UIs much effectively. Each component in React exists in the same structure but they work independently from one to another and merge all in a parent component which also allows us to take advantage of creating a re-usable component, and by combining them, it creates a final visual page for the application.

The react components do have their own style of business logic, methods as well as the collection of API calls. Every component can be reusable as per our business requirement or layout feasibility. For better understanding, consider the entire user interface as a tree of various elements. Here, the root is the parent component, and each of the other child components becomes their branches, which are further divided into sub-branches as their sub-child components.

By now it should be obvious as to why we need components: They’re the most important part of javascript libraries/frameworks that make front-end development seems easy to do.

Components are the workable parts of UI/UX. They function as one whole workable feature or functionality in your web app. They come as reusable parts, isolate functionalities within a single component, and reduce the clutter in the DOM you’re coding since it’s highly reusable and encourages reusability.

Instead of seeing them as a single piece of HTML file, components focused more on reusability and isolation. You could say it also serves as the “View” of your web app while rendering your data from API and toss in the React Components into the mix.

Types of Components

Fortunately for React, since its components reside inside javascript through the use of JSX, we have the option to use whatever types of components we wanna use.

Functional components
Class-based components

We will explain how and when to use these components in your React Application.

Functional Components

This type of component uses functions as a way we can construct our own components. Literally, it’s a function so it’s still acceptable for React to render these types of components for as long as it contains JSX syntax.

It’s possible for functional components to contain their own props. So you can still pass on values while using the component. Let’s see the structure of our functional component

So you see, we’re simply using javascript functions to create a component along with its properties/props.

With the release of React 16.8, react hooks has been released as a stable version, by using the hooks, we can have all the feature of class components into the functional components such as state and lifecycle hooks that we were unable to use before the release of hooks.

Class-based Components

This type of component uses class as a structure to construct our own components. This has a fair share of advantages compared to Functional components.

For instance, class-based components tend to have their own lifecycle and state which is useful for running our logic, fetching APIs, altering component UIs, and so on when we need it. If anything, this is a more powerful and flexible component compared to its functional counterparts. React does actually encourage you to use class-based components for the most part, but there’s also an advantage when we are to use functional components.

The class component may have state and props, where the state object can be modified inside the existing component but the value of props can not be altered which is a core feature of the class-based components with React and that is why it is being called a Stateful Components.

Let’s try to have a look at how we can construct class-based components

Choosing between Functional and Class-based components

Determining when to use these components is equally important in creating well-structured, maintainable React Apps.

Let’s start by explaining the differences and key features of Functional Components. When do we usually consider using it? We can use functional components in our react app if

We just want to reuse a big chunk of DOM in other components that need it
When we just want to reduce the clutter in our DOM
When there’s no need to maintain a component-level state

Functional-based components are useful in this scenario. Of course, you can also do these things in a class-based component, but it will cost you to structure the component in a class-based fashion which is a couple of lines of code. Functional has a minimal footprint on the code and can be useful in these cases as you may want your code to use as minimal footprint as possible.

In other cases, you might want to consider Class-based components and use them to construct your own component. You are going to depend on Class-based components in your react app if

You need a lifecycle hook to run your logic and fetch from your APIs (such as using componentDidMount())
You need a state to hold your data and control some of your UI using that state
You need a better structure and more powerful component that can have better controls In these cases, you will definitely need a Class-based component.

Summary

The class component and functional component serves a similar purpose in React application, but the difference is of the way of managing internal business logic and the structure, where class component uses state and life cycle hooks by default but in functional component uses react hooks released with recent version 16.8 so the state and lifecycle features can be implemented with the use of hooks function.

Now that you’ve learned a lot about the differences between Functional and Class-based components, it’s time for you to test the waters and create your very first React App!