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