How to use useState Hook in ReactJS

ReactJS is a popular JavaScript library for building user interfaces. One of the key features of React is its use of hooks, which allow you to add state and other features to functional components. One of the most commonly used hooks in React is the useState hook.

What is useState?

The useState hook is a built-in hook in React that allows you to add state to functional components. With the useState hook, you can maintain state in your component without the need for class components or this.setState.

How to use useState Hook in ReactJS

To use the useState hook in React, you first need to import it from the ‘react’ library:

    
      import React, { useState } from 'react';
    
  

Next, you can use the useState hook in your functional component like this:

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

In the above example, we are creating a state variable called ‘count’ and a function called ‘setCount’ to update the state. We are also initializing the state to 0.

You can then use the state variable and the function to update it in your component:

    
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    
  

When the button is clicked, the count state will be incremented by 1, and the component will re-render with the updated count value.

That’s how you can use the useState hook in ReactJS to add state to your functional components. useState is a powerful tool that can help you manage state and keep your components clean and easy to read.