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.
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.
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
We will explain how and when to use these components in your React Application.
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
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.
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.
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!