At the core of React's prowess is the concept of state. It is the most used and important concept in React as it allows components to track dynamic data and affect how the user interface looks and behaves.

Simply put, state is data that can change over time. Some data change during the lifecycle of a component and it is essential that the UI updates accordingly and displays the correct data at all times.

Note: State is internal to a component and can be modified within the component itself.

Consider a simple counter app. Without state, the count would always be static and would not update when you click a button. But with state, you can store the current count and update it each time you click the button. React then re-renders the component to display the updated count.

What is the useState Hook

The useState hook is one of the several hooks available in React. It allows you add state to functional components and is fundamental in managing state in React applications.

Here is the syntax for the useState hook:

const [state, setState] = useState(initialValue);

• state: The current value of the state variable.
• setState: Also known as a setter or updater function. It performs the action of updating the state value. It is common practice to prefix setter functions with the "set" word. While it is not a strict requirement, it is widely used for readability and consistency reasons.
• initialValue: The initial value of the state variable when the component first renders.

Basic Example of useState

Let’s walk through a simple example of how useState works in a simple counter component.

import { useState } from 'react';

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

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

In this code:

• We import the useState hook from React.
• At the top level of the Counter component, we declare a state variable count and initialize it to 0 using useState.
• The setCount function is used to update the value of count.
• A <p> element is returned, displaying the text "Current count:" followed by the current value of the count state variable.
• ()=>setCount(count + 1) is an arrow function that defines a callback. When the button is clicked, this function is invoked and the state is updated by increasing the count.

React then re-renders the component, and the new value of count is displayed on the screen.

Output

How to Update State with useState

The setState function returned by useState allows you to update the state. Here’s how state updates work in React:

• Direct Value Update: You can pass a new value directly to setState as shown in the previous example - (setCount(count + 1)).

• Functional Update: Sometimes, the state update depends on the previous state. In this case, it’s better to pass a function to setState to ensure you’re always working with the most up-to-date state.

For example:

setCount(prevCount => prevCount + 1);

In this code, the state is updated based on the previous state.

This is particularly useful in situations where multiple state updates may happen in quick succession.

Declaring Multiple State Variables

You can declare as many state variables as you need using the useState hook in a component. Each call to useState creates a separate piece of state, and you can use them to track different values within the same component.

Assuming you have a User component that is meant to store and manipulate values, you will need to declare state variables for firstname, lastname, age, and so on.

import { useState } from 'react';

export default function User() {
  const [firstname, setFirstname] = useState('')
  const [lastname, setLastname] = useState('')
  const [age, setAge] = useState(10)

  return (
  )
}