Why Use useState?

What is useState Hook?

In React, useState is a special function that lets you add state to functional components. It provides a way to declare and manage state variables directly within a function component. It should be noted that one use of useState() can only be used to declare one state variable. It was introduced in version 16.8....

Why Use useState?

Functional components are some of the more commonly used components in ReactJS. Most developers prefer using functional components over class-based components for the simple reason that functional components require less coding (on the developer’s part). However, two main features for the class are lost when one goes with a functional component – a dedicated state that persists through render calls as well as the use of lifecycle functions to control how the component looks and behaves at separate stages of its lifecycle....

Importing the useState Hook

To import the useState hook, write the following code at the top level of your component...

Structure of React useState hook

This hook takes some initial state and returns two value. The first value contains the state and the second value is a function that updates the state. The value passed in useState will be treated as the default value....

Internal working of useState hook

useState() creates a new cell in the functional component’s memory object.New state values are stored in this cell during renders.The stack pointer points to the latest cell after each render.Deliberate user refresh triggers stack dump and fresh allocation.The memory cell preserves state between renders, ensuring persistence....

React useState Hook Examples

Example 1: Using useState Hook...

Updating state using useState Hook

To update states using useState we will use the second value passed in useState hook which updates the first value....

Updating arrays and object using useState hook

Sometimes we only want part of a state object to be updated instead of the whole state to do that we use the spread operator to fetch previous values and then add the new value...