useState() Hook in React

Hello everyone! 👋 My name is Hitesh Mishra, and I'm a newcomer to the world of ReactJS. I've started documenting my learning journey and want to share my newfound knowledge with you all.

Please leave comments and insights that can help me improve my skills!

In this article we are going to explore the useState() hook in React, let's get started!

Introduction

The useState hook is a built-in function in React that allows us to add a state to functional components. With the useState hook, we can manage the state in our functional components, just like we would in class components.

Why do we need a state in React?

The state is what allows us to keep track of changes in our application and update the user interface accordingly. For example, if we have a button that toggles a menu, we need to keep track of whether the menu is currently open or closed. We can do this by storing a boolean value in the state.

Before the introduction of hooks, we could only use state in class components. However, with the useState hook, we can now use state in functional components as well.

How to use the useState hook

To use the useState hook, we first need to import it from the react library:

import React, { useState } from 'react';

The useState hook is a function that takes an initial state value as an argument and returns an array with two values: the current state value and a function to update the state value.

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

In this example, we are using the useState hook to add state to a functional component. We are setting the initial state value to 0, and storing the current state value in a variable called count. We are also storing a function to update the state value in a variable called setCount.

We can then use the count and setCount variables to manage state in our component.

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

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

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

In this example, we are using the count and setCount variables to manage state in a counter component. We are creating two functions, handleIncrement and handleDecrement, which uses the setCount function to update the count state value when the corresponding buttons are clicked.

When the state of a functional component changes, React will re-render the component and update the user interface accordingly. In the example I provided earlier:

Whenever the count state value changes, React will re-render the Counter component and update the value displayed on the screen.

React can efficiently update the user interface by using a process called "reconciliation". Reconciliation is how React updates the user interface when a component's state changes. React compares the previous and new versions of the component updating only the necessary parts rather than re-rendering the entire component., and improves performance.

This is one of the key benefits of React - it allows us to build complex user interfaces that can update in real-time, without sacrificing performance. The useState hook is a key tool in making this possible, by allowing us to add state to our functional components and manage changes in our application.