In this tutorial, you will learn how to convert a class component written using ReactJS into a functional component. Historically, functional components have had bad press. Functional components used to be less performant than class components. Functional components also provided no life-cycle methods.

As react has evolved, functional components now perform the same as their class counterparts. Using hooks/react context you can now add life-cycle methods to functional components. This allows you to do cool things, like manage application state! I once failed a job interview coding challenge because I used a class component... which shows just how much people love functional components! Converting a class component into a functional component can be done in a few steps. First, let's start with a simple 'PureComponent':

Class components have overhead to set up. Let us consider all the steps that you will need to follow just to create a simple component that renders a prop with a default value:

  • You need to remember to inherit from something
  • You need to decide if you will inherit from React.PureComponent or React.Component
  • You need a constructor to initialize the components default state
  • You need to define life-cycle methods to update the prop after the initial render.
  • You need a return()

It all feels kind of long-winded. The same things can be done within a functional component using a lot less code:

I think we can agree that the code above is a lot easier to reason about compared to its class-based equivalent. As it is a functional component, the code is slightly easier to read at first glance.

The code is using useState[] to manage property state. useState[] is something known as a ReactJS hook. Hooks are the new way of managing life-cycle events within functional-based components. The value that is passed into useState is the properties default value. useState[] will return two things. The property and a function that updates the property.

Functional components do not contain life-cycle methods. In order to replicate the same type of functionality as componentDidMount() we can use 'useEffect[]'. In class-based components componentDidMount() is known as a life-cycle function. A components componentDidMount() method is called after the component is rendered. This allows us as developers to do more interesting things with that component. Like display a loading spinner on the first render and then replacing it after data from an AJAX call has been returned slightly later on.

Just like class components, it's also possible to get into a pickle when using hooks in functional components. In a class component, if you tried to update the state within the render method you will likely encounter an error that says 're-render too many times' and your app crashes. This same thing can happen in a function-based component. If you do not pass an empty array when declaring useEffect[] you will encounter the same issue. This is the thing to keep in mind, class and functional components do the same thing, they just have different syntax!

This is why when you use useEffect you need to add a default value, otherwise, the component will loop. Armed with 'useState' and 'useEffect', you can now replicate all the life-cycle goodness that a class component provides. Using a lot less code as well! Enjoy!