React : Class vs Function Components

In the last post, we learned about components. Here, We will learn about types of components.

So, there are 2 types of components as you would have guessed by now.

• Class
• Functional

You can do everything in using either of them. But, functional components are preferred, for obvious reasons.

A simple comparision, why functional component ?

We will write a simple counter, which increments the count value when clicked.

using Function Component, the code as follows -

const FunctionalComponent=()=>{
    const[count , setCount]=useState(0);
    return
        <div style={{margin:'10px'}}>
          <h2>{count}</h2>
          <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    )
} 

While using Class Component, ... i will leave it upto you to judge.

class ClassComponent extends React.Component{
   constructor(){
        super();
        this.state={
            count :0
        };
        this.increment=this.increment.bind(this);
   } 
   increment(){
       this.setState({count : this.state.count +1});
   }
   render(){
        return (
            <div style={{margin:'10px'}}>
               <h2> {this.state.count}</h2> 
               <button onClick={this.increase}>+</button>
            </div>
        )
    }
}

and React.Component class comes with a lot of predefined baggage, which are not necessary all the time.

Whereas, by using Functional Components you can customise stuffs as per your need with the help of React Hooks.

Hooks are my favourites in the whole React library. And one of my fav. hooks in useMemo.

The hooks come in handy when you are dealing with frequent changes in the data stream.

I found a great use of useMemo during pagination. It can memoize the component based on the page based on it's parameters. A network call might happen in the background, but it sure hell doesn't concern the user. Hence, improving the UX.

useEffect hook is used instead of componentDidMount in a class component.

NOTE : You cannot use hooks inside class components. Hooks are exclusive to function components only.
TIP : Learn to harness the power of custom hooks. They are on a whole different level.

Resources :

Read more about their differences at gfg.

Read more about hooks at @this is my blog