React Hooks | Difference Between class based Component and Hooks in React

In this page you are going to learn why using React hooks and how to implement it as well as you will have more in depth knowledge in hooks.

What are Hooks ?

Hooks are a new additional features in React Version 16.8 which allows you to use React Features without class.

Hook’s don’t work with Classes

Hooks are the Functional Based Components

Difference Between class based Component and Hooks in React

Why Hooks ?

• You don’t need to work with the keyword : this
• Classes don’t minify very well and it makes hot loading less reliable
• Hooks helps to share stateful logic in better way
• Reacts creates components for complex Scenarios such as data Fetching and subscribing to events but Hooks manipulate the complex data and make easy.

Example of Class base React and Hooks :

Example without using Hooks

In this example we are building a count button and when you press it, it will increment by 1.

import React, { Component } from 'react'

class ClassCounter extends Component {
  constructor(props) {
    super(props)

    this.state = {
       count: 0
    }
  }

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.incrementCount}>Count {this.state.count}</button>
      </div>
    )
  }
}

export default ClassCounter

What exactly is happening in the above example ?
– We created a ClassCounter class and set the state value of count to 0.

    this.state = {
       count: 0
    }

In the JSX, we used Onclick event handler and pass the function incrementCount to perform some logical task.

<button onClick={this.incrementCount}>Count {this.state.count}</button>

Because of using class component we have use this everytime when we want call the function and states.

So in order to remove all this complexity we used hooks

Example of React Hooks

import React, {useState} from 'react'

function HookCounter() {

  const [count, setCount] = useState(0)

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count {count}</button>
    </div>
  )
}

export default HookCounter

Here we create an array element Const [count, setCount] and set the count value to 0.

 const [count, setCount] = useState(0)

In JSX, we use OnClick event handler and passed the arrow function inline.

onClick={() => setCount(count + 1)}

the value of count will be added each time when you click the button.

Output

Conclusion

After comparing these two components we can see that hooks need less code and it is more clear to read and understand. Hooks give us a more easy way to replace lifecycle methods.