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

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