React Components : Functional and Class-based

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!

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 reducing the clutter in the DOM you’re coding since it’s highly reusable and encourages reusability.

Instead of seeing them like 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 at how and when to use these components in your React Application.

Functional Components

These 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.

Class-based Components

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

For instance, class-based components tend to have their own lifecycle and state which is useful for running our logic, fetch APIs, altering component UIs, and so on when we need it. If anything, this is 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.

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 are equally important in creating a well-structured, maintainable React Apps.

Let’s start with 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 needs 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 it 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 Class-based component.

Summary

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!