E2EHIRING Logo
search

Search blogs by title

Jobs
Jobs
internships
Internships
Company
Assessment
mentorship
Mentorship
more
Moredropdown
Login
HomeSepratorIconBlogsSepratorIconThe useState HookSepratorIcon

The useState Hook

Han Solorashad pk
calendar24 Nov 2022
poster

With the invent of the functional components in ReactJS, we can perform state management using a famous hook called useState. We declare and track the component's state using this hook. It takes an optional argument as the initial state value and returns the current state and a function to update it.

const [counter, setCounter] = useState(1);

In the above code snippet, we initialize the counter state with the value of 1, and the variable counter will always give us the current state value. If we want to update the state, we do not directly update the counter variable. Instead, we will explicitly call the setCounter() method and update the state value. 

const incrBy3() => {setCounter(counter + 3);}

The method incrBy3() update the current state by incrementing the counter value by 3. The update of a state triggers the re-rendering of your component. It means the useState hook gets called internally to provide you with the updated counter value that you may use in your JSX.

<div className="counter-box">

    <span>{ counter }</span>

    <button onClick={incrBy3}>+ 3</button>

</div>


The above snippet shows the JSX code that renders the current state value(counter) and a button click-event that uses the updater function(setCounter()) to change the state.

If we put everything together in a ReactJS component, it will look like this,

import React, { useState } from 'react';


export default function App() {
  const [counter, setCounter] = useState(1);


  const incrBy3 = () => {
    setCounter(counter + 3);
  };


  return (
    <div className="container">
      <h1>Increment By 3</h1>
      <div className="counter-box">
        <span>{ counter }</span>
        <button onClick={incrBy3}>+ 3</button>
      </div>
    </div>
  );
}

Conclusion

To conclude, ReactJS's standard hooks got lots to offer when you use functional components. The useState hook helps us create and track the state changes. Knowing the extra bit of information about the lazy initialization and previous state value may help us deal with situations.
























Recent Posts

How is Technology impacting the HR practices in India in the post Covid Era?

How is Technology impacting the HR practices in India in the post Covid Era?

Collection of 500+ ML projects

Collection of 500+ ML projects

How to Retain Your Tech Employees amid Economic Recession?

How to Retain Your Tech Employees amid Economic Recession?

User enumeration - vulnerability and mitigation

User enumeration - vulnerability and mitigation

LabelImg for image tagging - Image processing

LabelImg for image tagging - Image processing

copycopycopycopy

Han Solo

Recent Posts

How is Technology impacting the HR practices in India in the post Covid Era?

How is Technology impacting the HR practices in India in the post Covid Era?

Collection of 500+ ML projects

Collection of 500+ ML projects

How to Retain Your Tech Employees amid Economic Recession?

How to Retain Your Tech Employees amid Economic Recession?

User enumeration - vulnerability and mitigation

User enumeration - vulnerability and mitigation

LabelImg for image tagging - Image processing

LabelImg for image tagging - Image processing