Class vs Function React Component

Photo by Photos Hobby on Unsplash

Intro

If you have experience with React.js then you know that React.js is component base framework and provide two ways to write component, both class and function respectively.

Essentially they are different but you can use either class or function to achieve same result. I am going to explore what are the differences between class and function component.

The difference

Base on documents here and here from React website. I know the following difference

Class Component

• Use ES6 class to define React component.
• Access to component’s Lifecycle
• Access to component’s state

Function Component

• Is literally a javascript function
• No access to component’s Lifecycle
• No Access to component’s state

Write component in class and function

To write component in class here is example

Class Component

To write component in function here is example

Function Component

Component ‘s Lifecycle

Class

Here I have documented about class component’s lifecycle.

Function

What about function component? function component don’t access to lifecycle and state what should I do?

In version 16.8, React introduced Hook which let you use state and other React features such as lifecycle.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Remember the example of writing class component? The state is initialized in constructor() method, however in function component you can use useState() to achieve it. Here is the example

Function Component with Hook

For function component’s lifecycle, according to official document here you can do it with Hook.

They are not so much different after all

In fact, I can use function component with React Hook to achieve same result that can be done with class component.

One little thing there

Take look into these two examples

Class component example

Function component example

Maybe you did not see the different between them, but here is what you need to do. Increase counter to 3 and then click “Show alert after 3 seconds” button, before alert pop up then continue increase counter. Observe the count from alert popup. Try in both examples.

Do you see the different? In class component example, alert always preset the last count you increase to. However, in function component the alert only present the count the moment you click “Show alert after 3 seconds” button in function component example.

Let’s say we have a system that enable customer to increase/decrease amount on a product and place an order, an alert only popup when order was successful placed after period of time.

That would be a problem if it is in class component. Even amount of product in order was placed correctly but alert pop up with totally different number. In this case, user will get confused.

On the other hand, function component would behave as expect.

Why would this happen?

From those two examples.

Class example

Function example

It is because state is mutated by React in class component every time you click increase count. However, function component capture the state for each time.

In function component example

function Counter() {
  
    const [count, setCount] = React.useState(0);
    
    const handleIncrease = ()=>{
      setCount(counter=>counter+1);
    }
    
    const handleAlert = ()=>{
      setTimeout(()=>{
        alert('Counter is:'+count);
      }, 3000);
    }
    ....other code
}

We give an arrow function to setTimeout() as a callback function and this callback function use alert to present count which we declared in the beginning of Counter(). The moment handleAlert() is called, the value of count is captured. This also know as javascript Closures .

In function component, the process looks like below:

First time render component

function Counter() {
  
    const [count, setCount] = React.useState(0);
    
    ....other code
}

click increase button we setCount(1)

React render component

function Counter() {
  
    const [count, setCount] = React.useState(1);
    
    ....other code
}

click increase button we setCount(2)

React render component

function Counter() {
  
    const [count, setCount] = React.useState(2);
    
    ....other code
}

so the moment you click show alert it capture state in that moment. For example, you click show alert when count set to 1 and then 1 is captured and presented with alert after 3 seconds.

The case is different in class component

class Counter extends React.Component {
  constructor(props){
    super(props);
    this.state={
      count: 0
    }
  }
  .......other code
}

state here live in class not function anymore so it is not captured, instead you always get up to date state anytime you access to state.

Little trick to capture state in class component

In class component, whenever you would like to capture the state you do like this for example

class Counter extends React.Component {
  .....other code
  handleAlert = ()=>{
    const state = this.state;
    setTimeout(()=>{
      alert('Counter is:' + state.count);
    }, 3000);
  }
  .....other code
}

Note the handleAlert is using ES6 arrow function, you can do this

this.handleAlert = this.handleAlert.bind(this);

in constructor() if you don’t use arrow function.

Conclusion

Class component can access to lifecycle and state out of box while function component don’t have access to those two features. However, we can use Hook provided by React version 16.8 to achieve same result.

Function capture state in each moment while class’s state is always up to date.

You can use little trick to make class component to captured it’s state.

One thing I did not mention is that function component not only capture state but also can make state always up to date, by using useRef(). The trade off here is you have to manage state by yourself.

You can achieve what you want either use Class or Function or mix them together.