An introduction to ReactJS State

An
Introduction to ReactJS State

Understanding ReactJS State

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: '[e-mail]',

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>
);
}

Multiple Choice

What is React state used for?

• To manage external data sources.

• To manage global application data.

• To handle routing in React applications.

• To store and manage component-specific data that can change over time.

Multiple Choice

Which hook is commonly used for managing state in functional components in React?

• useEffect

• useState

• useContext

• useRef

Multiple Choice

In a React component, how do you access and modify state?

• Using the state property and setState method.

• By directly modifying the state variable.

• State cannot be accessed or modified in class components.

• Using the props property.

Multiple Choice

What is the purpose of the setState function in React?

• To retrieve the current state.

• To delete the state.

• To set a new state value.

• To create a state variable.

Multiple Choice

How do you initialize a state variable called count with an initial value of 0?

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

• const count = 0;

• const count = useState(0);

• const count = setState(0);

  const setCount = setState(0);

Multiple Choice

In React, how can you pass state from a parent component to a child component?

• By defining a state variable with the same name in both components.

• By directly accessing the parent component's state.

• State cannot be passed from parent to child components.

• By passing it as a prop to the child component

Multiple Choice

What's the correct way to invoke the updater function to increment the count by 1 when a button is clicked?

• setCount(prevCount => {

  return prevCount + 1;

  })

• const incrementCount = () => {

  setCount(count + 1);

  };

• count => {

  return setCount(count + 1);

  }

• updateCount => setCount(updateCount + 1);

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?