Technoarch Softwares - React Hooks

React Hooks

React Hooks are a new addition in React, it helps us to use state without writing classes.

I.e we can use state in the functional component also.

Rules of Hooks

Hooks are JavaScript functions, but they have two additional rules

  • Top Level

We can only call Hooks at the top level, its cannot be called inside loops, conditions or nested functions.

  • From the component

    Don’t call hooks from a regular javascript function.

When do we use Hooks

If we write a function component and we want to use state inside our function component we had to convert it into a class component to be able to use state, but now with the help of hooks we can use state in the function component with converting it into a class component.

Declaring state variable 

  • Class Component 

class Example extends React.Component {
  constructor(props) {
    this.state = {
       count: 0



  • Using Hooks

import React, { useState } from 'react';
function Example() {

 // Declare a new state variable, which we'll call "count"

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


By calling useState we declare our variables, Here “count” is our state variable and setCount is the state. 


Using State Hooks

This is an example of useState, This is how a functional component looks like when using hooks.

The Equivalent class component will look something like this

Reading States 

When want to display the value of state variable

  • Class 

<p>You clicked {this.state.count} times</p>
  • When using Hooks

<p>You clicked {count} times</p>


Updating States

  • Class

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
 Click me


  • When using Hooks
<button onClick={() => setCount(count + 1)}>
Click me



Hooks have benefited us with the following: 

  • How we managing state has become easier to reason about

  • Our code is significantly simplified, and more readable

  • It’s easier to extract and share stateful logic in our apps.


Leave a Comments

Your email address will not be published. Required fields are marked *