Topic: Introduction to State
Technology: React JS
React JS Training: JustAcademy React JS Training Course
Course Demo: Register for React JS Course Demo
State is a fundamental concept in React that allows a component to store and manage information that can change over time. State helps React applications respond to user interactions, such as clicking buttons, typing into input fields, selecting options, opening menus, and adding products to a shopping cart.
When state changes, React can render the component again to display the updated information. State makes user interfaces dynamic and interactive.
Consider a counter application. Initially, the counter displays 0. When the user clicks the Increase button, the counter changes to 1, then 2, and continues increasing. The changing counter value is stored in state.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
export default Counter;Explanation: The count variable stores the current value. The setCount function updates it, and React renders the updated count.
State is data that a component remembers between renders. It is managed by React and can be updated when an event or application action occurs.
Examples of information that can be stored in state include:
import { useState } from "react";
function Message() {
const [message, setMessage] = useState("Welcome");
return (
<div>
<h2>{message}</h2>
<button onClick={() => setMessage("Hello React!")}>
Change Message
</button>
</div>
);
}
export default Message;Initially, the heading displays Welcome. When the button is clicked, the state changes and the heading displays Hello React!
State is needed when a component must remember changing information and display the latest value. Ordinary local variables do not provide the same behavior because changing a local variable does not automatically tell React to render the component again.
State is useful for:
Regular variable:
function Counter() {
let count = 0;
function increase() {
count = count + 1;
}
return (
<div>
<p>Count: {count}</p>
<button onClick={increase}>Increase</button>
</div>
);
}This example does not update the displayed count reliably. Changing count does not trigger a React render, and a later render creates the local variable again.
Using state:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}The state version remembers the count between renders and updates the UI when setCount is called.
useState is a built-in React Hook that lets functional components store and update state. A Hook is a special React function that provides access to React features.
To use useState, import it from React.
import { useState } from "react";const [state, setState] = useState(initialValue);Parts of the syntax:
state: The current state value.setState: The function used to request a state update.useState(): The Hook that declares the state variable.initialValue: The value used to initialize the state.import { useState } from "react";
function App() {
const [name, setName] = useState("Rahul");
return <h2>Name: {name}</h2>;
}
export default App;Here, name initially contains Rahul. The setName function can be used to update the value when required.
React state works by storing a value, responding to an update request, and rendering the component with the latest state.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function increaseCount() {
setCount(count + 1);
}
return (
<div>
<h2>Current Count: {count}</h2>
<button onClick={increaseCount}>Increase</button>
</div>
);
}
export default Counter;When the button is clicked, increaseCount requests the next count value. React then updates the displayed count during the next render.
React state can store different JavaScript data types, depending on what the component needs to remember.
Number state is useful for counters, scores, quantities, and ratings.
const [count, setCount] = useState(0);String state is useful for names, messages, search terms, and text inputs.
const [name, setName] = useState("Guest");Boolean state is useful for tracking true-or-false conditions, such as whether a menu is open.
const [isOpen, setIsOpen] = useState(false);Array state can store lists of tasks, products, names, or selected items.
const [items, setItems] = useState(["HTML", "CSS"]);Object state can store related information, such as a user's profile or form details.
const [user, setUser] = useState({
name: "Aarav",
city: "Mumbai"
});The setter returned by useState is used to request a state update. Calling the setter does not change the state variable in the already executing code. The updated value is available when React renders the component again.
import { useState } from "react";
function NameChanger() {
const [name, setName] = useState("Amit");
function changeName() {
setName("Priya");
}
return (
<div>
<p>Name: {name}</p>
<button onClick={changeName}>Change Name</button>
</div>
);
}
export default NameChanger;Clicking Change Name updates the state from Amit to Priya.
When the next state depends on the previous state, use an updater function. This is especially helpful when multiple updates are queued together.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function increaseThreeTimes() {
setCount(previousCount => previousCount + 1);
setCount(previousCount => previousCount + 1);
setCount(previousCount => previousCount + 1);
}
return (
<div>
<h2>Count: {count}</h2>
<button onClick={increaseThreeTimes}>Increase by 3</button>
</div>
);
}
export default Counter;Each updater receives the pending previous value and returns the next value. Clicking the button increases the count by three.
A component can have more than one state variable. This is useful when the component needs to track separate pieces of information.
import { useState } from "react";
function Profile() {
const [name, setName] = useState("Neha");
const [age, setAge] = useState(22);
return (
<div>
<h2>Name: {name}</h2>
<p>Age: {age}</p>
<button onClick={() => setName("Riya")}>Change Name</button>
<button onClick={() => setAge(age + 1)}>Increase Age</button>
</div>
);
}
export default Profile;The name and age variables maintain separate state values. Each setter updates its corresponding state.
Objects can be stored in state, but they should not be mutated directly. Instead, create a new object with the updated property.
import { useState } from "react";
function Profile() {
const [user, setUser] = useState({
name: "Aarav",
city: "Mumbai"
});
function changeCity() {
setUser({
...user,
city: "Pune"
});
}
return (
<div>
<p>Name: {user.name}</p>
<p>City: {user.city}</p>
<button onClick={changeCity}>Change City</button>
</div>
);
}
export default Profile;The spread syntax copies the existing user properties, and the city property is replaced in the new object.
When updating an array in state, create a new array instead of modifying the existing array directly.
import { useState } from "react";
function TodoList() {
const [todos, setTodos] = useState(["Learn HTML", "Learn CSS"]);
function addTodo() {
setTodos(previousTodos => [...previousTodos, "Learn React"]);
}
return (
<div>
<ul>
{todos.map((todo) => (
<li key={todo}>{todo}</li>
))}
</ul>
<button onClick={addTodo}>Add Task</button>
</div>
);
}
export default TodoList;The spread syntax copies the previous array and adds a new item at the end.
State is often updated in response to events, such as clicks, text input, form submissions, and checkbox changes.
import { useState } from "react";
function ToggleMessage() {
const [visible, setVisible] = useState(false);
return (
<div>
<button onClick={() => setVisible(!visible)}>
{visible ? "Hide Message" : "Show Message"}
</button>
{visible && <p>Welcome to React JS!</p>}
</div>
);
}
export default ToggleMessage;The visible state controls whether the message appears. Clicking the button switches the state between true and false.
State is commonly used to store form input values. A controlled input uses a state value for its value and an onChange handler to update that state.
import { useState } from "react";
function NameForm() {
const [name, setName] = useState("");
return (
<div>
<label htmlFor="name">Enter your name: </label>
<input
id="name"
value={name}
onChange={event => setName(event.target.value)}
/>
<p>Your name is: {name}</p>
</div>
);
}
export default NameForm;Every time the user types, onChange updates the name state and React displays the current value.
| Mistake | Problem | Correct Approach |
|---|---|---|
| Using a regular variable for changing UI data | Changing it does not trigger a render | Use useState for data the component must remember |
| Changing state directly | Mutating existing objects or arrays can cause bugs | Create a new object or array and pass it to the setter |
| Calling a setter during every render | May create an infinite render loop | Update state in event handlers or suitable logic |
| Expecting the current variable to change immediately | The current render retains its state snapshot | Use the new state value on a later render |
| Calling useState inside a condition | Breaks the Rules of Hooks | Call Hooks at the top level |
| Storing duplicate state | Different values can become inconsistent | Calculate values from existing state when possible |
| Feature | Props | State |
|---|---|---|
| Meaning | Inputs passed to a component | Information remembered by a component |
| Typical source | Parent component | Declared and managed by a state owner |
| Update mechanism | Parent supplies new values | State setter requests an update |
| Purpose | Configure a component | Track information that changes over time |
| Example | |
const [count, setCount] = useState(0) |
Objective: Create a counter with Increase, Decrease, and Reset buttons using React state.
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Counter Application</h1>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increase</button>
<button onClick={() => setCount(count - 1)}>Decrease</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
export default App;Project Outcome: The application stores the count in state and updates the displayed value when the user clicks a button.
State is information a component remembers between renders and can update in response to events or other application actions.
useState is a built-in React Hook that declares a state variable and returns its current value along with a setter function.
It returns an array containing two items: the current state value and a function to request updates.
State persists between renders and its setter requests a render so the UI can reflect the new value.
Yes. A component can declare multiple state variables for different pieces of information.
Yes. State can hold numbers, strings, booleans, arrays, objects, and other JavaScript values.
React state should be treated as read-only. Create a new object or array when updating structured state.
It is the function returned by useState that requests the next state value.
React schedules a render so the component can display the updated state. React may batch multiple updates.
Props are inputs supplied to a component, while state is information managed by the component or its state owner.
State is one of the core concepts in React JS. It enables components to remember changing information and update the user interface in response to interactions. By learning useState, setter functions, event handling, and safe updates to objects and arrays, developers can create interactive and maintainable React applications.
Learn React JS: Explore JustAcademy React JS Training
Course Demo: Register for a React JS Course Demo
