React Hook vs. Classes

When I first stumbled upon React Hooks, I had just finished learning how to use class components and set up state variables. I thought React Hooks was just another gimmick on how to form a component. But the more I started using React, the more I naturally gravitated towards React Hooks. Nowadays, I look at class components and I shudder a little bit thinking just how much easier it would have been to do that in Hooks.

So lets compare!

To compare, let’s sketch up a component that can display and increment a counter. But let’s do it both in React Hooks and a regular class component.

First lets do it with a class component. Side note, without React Hooks, to have a stateful component, you actually NEED to have a class component as functional components can not hold state without Hooks.

import React from ‘react’;

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

   handleClick = () => {
      this.setState( (prevState) => {
         return { counter: prevState.counter + 1 }
      })
   }

   render(){
      return(
         <button onClick={ handleClick }>
            {this.state.counter}
         </button>
      )
   }
}

export default Counter;

Yes, that whole thing is just to store and display one state. Now lets do that same thing but with React Hooks.

import { useState } from ‘react’;
function Counter(){
   const [counter, setCounter] = useState(0);
   const handleClick = () => {
      setCounter(counter + 1);
   }

   return(
      <button onClick={handleClick}> {counter} </button>
   )
}
export default Counter;

Isn’t that insane?! It still boggles my mind how simple React Hooks makes it! React Hooks gets rid of the need for a constructor just to instantiate your state, gets rid of the need to define your own setState method, gets rid of needing to use a callback function to store and reference the previous state just to increment that and set it to the current state, gets rid of the messy ‘this’ thats all over the place. Over all I think React Hooks simplifies our components alot and that that’s something we should all want to do. With that being said, I think it is still widely useful to learn the classical way with components before jumping into React Hooks. I’m very glad to be fortunate enough to start off with the class components first because I feel it gave me a better understanding of why React Hooks is needed and to actually have experienced the problem it tries to solve. That and also since legacy code bases are probably still written with class components and therefore making it still relevant.