Move to functional components from the class components.

Published in

Codewords

3 min readMar 13, 2020

We have been refactoring our stateful class components to functional components using hooks for some time now. Hooks cover all use cases for classes while providing flexibility in extracting, testing, and reusing code.
Functional components make code less complex and easy to read especially when you are dealing with higher-order components and trying to re-use stateful logic.

Disclaimer.
This blog talks about certain react concepts like lifecycle methods, state, props, etc. In case things seem alien to you, go check out the main concepts section in the react official document.

Before we move any further, let me give a short brief on hooks.
Hooks were added to React 16.8 and they let you “hook into” React state and lifecycle features from function components.

We will be focusing on two hooks here and how to use them to convert class component to a functional component.

useState
It is called inside a functional component to add local state to it. React preserves this state between re-renders it returns a pair: the current state value and a function that lets us update the state value.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect
Use this hook to perform any side effects(Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects).
By using this Hook, we tell React that the component needs to do something after render.

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
  });

The code snippet implies that after every DOM update, handleStatusChange will be called. In case we want the function to be called only once we can pass the dependency array to it as shown in the code snippet below.

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
  },[]);

The above code snippet implies that function handleStatusChange will run only once when the component mounts.

In case we want useEffect to run only when a specific state is updated then the state variable can be passed to the dependency array as in the below code snippet.

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
  },[status]);

The code snippet implies that the function handleStatusChange will run only when status gets updated.

If you look at the useEffect examples discussed above, you will find some similarities in the class component lifecycle method and useEffect.

Converting class component to functional component.

componentDidMount can be written as

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
  },[status]);

componentWillUnmount can be written as

useEffect(() => {
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, []);

componentDidUpdate can be written as

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
  },[status]);

I think by now we have a basic understanding of hooks and how can we use them to convert a class component to a functional component.
Let’s look at an example below which shows a class component.