useState Hook

Introduction

The useState hook in React allows you to add state variables to functional components. It returns a stateful value and a function to update it. Suppose you want to create a simple website with a text element that initially displays ‘Change me using a button’ and a button. When you click the button, it will change the text to ‘Changed’.

let’s do it using react:-

Let me explain the code:

1. First, we import React and the useState hook from the “react” library:

import React, { useState } from "react";

2. We define a functional component called Counter:

function Counter() {

3. Inside the Counter component, we use the useState hook to initialize a state variable called count with an initial value of 0:

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

• count is the state variable that will hold the current count value.
• setCount is a function provided by the useState hook to update the count value.

4. We define two functions, increment and decrement, which will be called when the “Increment” and “Decrement” buttons are clicked. These functions use the setCount function to update the count state variable:

const increment = () => {
  setCount(count + 1);
};

const decrement = () => {
  setCount(count - 1);
};

Within the return statement, we define the JSX (UI) for our counter app:

• We display a heading “Counter App.”
• We show the current count value using the {count} variable inside a paragraph (<p>) element.
• We provide two buttons, “Increment” and “Decrement,” each of which has an onClick event handler that calls the increment and decrement functions, respectively, when clicked.

return (
    <div>
      <h1>Counter App</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );

Conclusion

In conclusion, the hook is a powerful feature in React that simplifies state management within functional components. By providing a straightforward way to declare and update state variables, it streamlines the development process and enhances code readability. Its versatility and performance optimizations make it a fundamental tool for building React applications. Whether you’re working on a small project or a large-scale application, mastering the hook is essential for creating robust and efficient React components.

Frequently Asked Question