React State Explained Clearly
A Beginner’s Guide to the useState Hook
React state is a component’s memory for storing data. This component-specific memory has two primary attributes that differentiate it from a regular JavaScript variable:
It persists (retains its data) during the component’s re-rendering.
Modifying it causes React to re-render the component with the updated state.
Tip:
React rendering means invoking (calling) a component.
React State retains data during a component’s re-rendering, not when a page reloads. Refreshing your browser will cause React to re-initialize the entire application. Therefore, all states will revert to their initial values.
To retain your component’s state during reloads or when users reopen the web page or close their browsers, store the state data outside the app’s scope. Common persistent memory locations are web storage, cookies, and databases.
How to Access and Modify a Function Component’s State
React provides the useState() method (the state hook) for accessing and modifying a function component’s state.
Example:
import { useState } from "react";
function MyBio() {
const myName = useState("Oluwatobi");
return <h1>My name is {myName[0]}</h1>;
}
export default MyBio;The snippet above used React’s useState() function to store the "Oluwatobi" string inside the MyBio component’s state memory.
