Functional Components vs. Class Based Components

Functional VS Class Based Components, this week I'm going to show you how you can make a component in React with these two different ways and what the big differences are between them. And why functional components are increasing in popularity.


This week we dive back into the wonderful world of React. In previous articles we talked about different aspects of React and then Functional and Class based Components came up briefly. This week I want to dig a little deeper into the differences and similarities between these 2 components as the Functional Components are gaining popularity.


I'm going to show the differences between the two with a few examples, so you can see for yourself why functional components are becoming so popular.


Class-based Components

One of the reasons Functional Components are gaining ground is the advent of hooks. Before hooks, if we wanted to create a dynamic element, we had to use Class based Components. This was because functional components had no state of lifecycle methods.

This class must then have a render method in it in which we return the JSX markup.


As an example, let's create a small, simple component where the counter is automatically incremented. We can also increase it by clicking a button. When we add something to the DOM, we call it Mounting in React. The opposite, 'removing something from the DOM', is what we call unmounting.


Mounting a component calls the following methods in React.

– constructor() – render() – componentDidMount()

The only method required in a class component is the render() method. If you want to know more, look below..

More about lifecycle methods 

To get this working we need an initial value that changes. So we have to assign our value to the state object. We also need a componentDidMount() method to set up our interval and a function to raise the state of our counter.


Functional Components

As I mentioned in the intro, since the arrival of Hooks in React 16.8, functional components have been gaining in popularity. This is because hooks allow you to use state in functional components (the useState hook). There is also a hook that does almost the same thing as the lifecycle methods (the useEffect hook). We can use hooks very easily by importing the name of the hook in the import statement next to React.


useState hook

As mentioned above, we can easily import the useState hook. That will look like this:

import react, { useState } from ‘react’;


If we set the state with hooks, we also immediately create a function to update it. We also immediately set the default value of that state. This then looks like this:

const [ counter, setCounter ] = useState(0)


counter is our state, setCounter is our function to update it and the 0 in useState is the initial value of the state counter.


useEffect hook

The useEffect hook is called when your component is first rendered and at every renderer. You can adjust this even further by passing certain parameters in an array as the 2nd argument. You can also pass a cleanup function in this for when you unmount your component.

useEffect(() => { const ticker = setInterval(() => { setCounter(counter + 1) }, 1000); return () => clearInterval(ticker) });


We use the setCounter of the useState hook to update the state. And we return the cleanup function to remove the interval function when we unmount the component. This is equivalent to the componentWillUnmount() lifecycle method.


One of the main differences is that functional components require significantly less code. I myself remain a fan of the class-based components where everything is clearly structured. But the compact way of programming in functional components also appeals to me very much and after some getting used to it, it also reads fine. The idea of less code definitely appeals to the sloth in me. After some experimenting, I'm still not sure which way I like best. We may end up with a combination of the 2 functional components where possible, and class based components for a little more clarity.


We have briefly explained the differences between a class-based component and a function-based component using an example. But the biggest difference, which is often overlooked, is that function components capture the rendered values. I didn't go into this because it is explained wonderfully in an article written by Dan Abramov. Below is the link to that article


Article by Dan Abramov

Read some of our blogs down here!

Expand your knowledge with the 4BIS Blog...

Automating your Software and Processes: Benefits and Applications

Automate, Web development, Software Modernisation, Business software, Knowledge Base

Discover how automation of your software and processes can improve your business. Learn about the benefits of automation and how it can make your operations more efficient. Contact us for customized automation solutions.

Read more

WooCommerce made functional on both mobile and desktop

Automate, Web development, Software Modernisation, Knowledge Base, WordPress, WooCommerce

Learn how to change backend behavior on a WordPress website for mobile devices with 4BIS Innovatives' expert guide. Discover tips on optimizing your WordPress site's performance by adjusting backend settings specifically for mobile users. Explore how...

Read more

Why Your Business Needs Custom HR Software

Business software, Web development, Software Modernisation, B2B

Discover why HR software is essential for your company. Learn about its benefits and how custom solutions can transform your HR management. Contact us for tailored HR software solutions.

Read more

And what can we do for you?_

Do you want to know more or are you interested? Please feel free to contact us directly, by phone or via mail.
Or use one of our contact forms so that we can answer you as quickly and appropriately as possible can give. We would love to hear from you!

back to top