What are React State?

Using React state is like giving your components memory. It allows your components to remember things and reacts to it.

What are React State?

• Components frequently need to respond to user interactions by updating/re-rendering what's displayed on the screen.

• For example, clicking "next" in an image gallery should switch the displayed image, and clicking "buy" should add an item to the shopping cart.

• Components require a way to "remember" things, such as the displayed image, or shopping cart contents referred to as "state."

useState Hook

To add a state variable, we can use the React Hook: useState

Anatomy of useState Hook

1. To add a state variable, import useState from React:
   import { useState } from 'react';

2. useState returns an array with two elements: [state, setState]:

   1. state: The current value of the state variable. It's where you can store data that you want to keep track of within your component

   2. setState: A function provided by React that allows you to update the state variable.

Scenario: Button on Click

Imagine you are building a simple counter application using React.

You want to display a number on the screen, and users can increase or decrease this number by clicking buttons.

Step 1) Create a React component called Counter

import React, { useState } from 'react';
function Counter() {

return (

<div>

<h1>Counter App</h1>

<p>Count: 1</p>

<button onClick=add>+</button>

<button onClick=subtract>-</button>

</div>

);

}

• In this example, we import the useState hook from react.

• In our Counter component, we return a Count and 2 button which invokes the functions: add and subtract.

Step 2) Initializing State

import React, { useState } from 'react';

function Counter() {

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

return (

<div>

<h1>Counter App</h1>

<p>Count: 1</p>

<button onClick={add}>+</button>

<button onClick={subtract}>-</button>

</div>

);

}

• Use the useState hook to create a count state variable with an initial value of 0.

• Define a setCount function used to update this state variable.

Step 3) Using the count state variable

import React, { useState } from 'react';

function Counter() {

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

return (

<div>

<h1>Counter App</h1>

<p>Count: {count}</p>

<button onClick={add}>+</button>

<button onClick={subtract}>-</button>

</div>

);

}

• Use the count state variable for displaying within the Counter component.

Step 4) Using the setCount function to update count

import React, { useState } from 'react';

function Counter() {

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

return (

<div>

<h1>Counter App</h1>

<p>Count: {count}</p>

<button onClick={() => setCount(count + 1)}>+</button>

<button onClick={() => setCount(count - 1)}>-</button>

</div>

);

}

• Use the setCount function to update the count state variable

Multiple state variables

• You can have as many state variables of as many types as you like in one component.

• It is a good idea to have multiple state variables if their state is unrelated. But if you find that you often change two state variables together, it might be easier to combine them into one that holds an object instead

Multiple state variables example

function UserProfile() {

// Define an object state variable with initial values

const [user, setUser] = useState({

name: 'John Doe',

email: 'johndoe@example.com',

age: 30,

});
return (
<div>
<p>Name: {user.name}</p>
<p>Email: {user.email}</p>
<p>Age: {user.age}</p>
<button onClick={increaseAge}>Increase Age</button> </div>
);
}

Summary

In this lesson, you have learnt:

• What are React State?

• What is the purpose of using State?

• The anatomy of a useState Hook

• How to initialize a state

• What are the purpose of the state variable and updater function?

• How to initialize multiple state variables?