React useState Hook: Complete Guide to State in React
When you build a React application, you often need to store
information that can change while the user is using the page.
For example:
- A
counter can increase or decrease.
- A
button can change from Follow to Following.
- A
form field can store the text entered by the user.
- A
menu can open and close.
- A
product quantity can increase or decrease.
React uses state to handle this type of changing
information.
The useState Hook is one of the first React Hooks that every
React developer should learn. It allows a functional component to create and
manage its own state.
What Is State in React?
State is information stored inside a React component that
can change over time.
When state changes, React updates the component so that the
new information appears on the screen.
For example, suppose you create a simple counter.
Initially:
Count: 0
When the user clicks the button:
Count: 1
After another click:
Count: 2
The value 0, 1, 2, and so on is the component's state.
Simple Example
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;
How This Program Works
This line creates the state:
const [count, setCount] = useState(0);
There are three important parts:
count
↓
Current state value
setCount
↓
Function used to update the state
useState(0)
↓
Initial value is 0
When the button is clicked:
setCount(count + 1);
React stores the new value and renders the component again.
Python oop Tutorial
What Is useState?
useState is a React Hook used to add state to a functional
component.
imported from React:
import { useState } from "react";
Then it can be used inside the component:
const [name, setName] = useState("Aishwarya");
Here:
- name
contains the current value.
- setName
is used to change the value.
- "Aishwarya"
is the initial value.
For example:
import { useState } from "react";
function User() {
const [name,
setName] = useState("Aishwarya");
return (
<div>
<h2>Hello
{name}</h2>
<button
onClick={() => setName("Priya")}>
Change Name
</button>
</div>
);
}
export default User;
Initially the browser displays:
Hello Web Designing Theory
[Change Name]
After clicking the button:
Hello Aishwarya Sanjay
[Change Name]
Python Functions Tutorial
UseState Syntax
syntax of useState
const [state, setState] = useState(initialValue);
example1
const [count, setCount] = useState(0);
example2
const [name, setName] = useState("John");
You can also store other types of values.
Number
const [age, setAge] = useState(25);
String
const [name, setName] = useState("Rahul");
Boolean
const [isLoggedIn, setIsLoggedIn] = useState(false);
Array
const [skills, setSkills] = useState(["HTML",
"CSS"]);
Object
const [student, setStudent] = useState({
name:
"Aishwarya",
age: 22
});
Updating State
To update state, use the setter function returned by
useState.
example 1
const [count, setCount] = useState(0);
To change the count:
setCount(10);
Or:
setCount(count + 1);
Do not directly change the state variable.
Incorrect:
count = count + 1;
Correct:
setCount(count + 1);
The setter function tells React that the state has changed
and that the component should be rendered again.
keyboard Events in React
Example: Updating a Counter
import { useState } from "react";
function Counter() {
const [count,
setCount] = useState(0);
function
increaseCount() {
setCount(count +
1);
}
function
decreaseCount() {
setCount(count -
1);
}
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={increaseCount}>
Increase
</button>
<button
onClick={decreaseCount}>
Decrease
</button>
</div>
);
}
export default Counter;
Output
Initially:
Counter: 0
[Increase] [Decrease]
After clicking Increase:
Counter: 1
After clicking Increase again:
Counter: 2
After clicking Decrease:
Counter: 1
Updating State Based on the Previous State
Sometimes the new state depends on the previous state.
example1:
setCount(count + 1);
works for simple situations, but when several state updates
happen together, it is better to use the functional form:
setCount(previousCount => previousCount + 1);
Example2:
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 3
Times
</button>
</div>
);
}
export default Counter;
Here each update receives the latest state value.
This form is especially useful when the next value depends
on the previous value.
Multiple States in React
A component can have more than one state variable.
For example, a user profile might need to store:
You can create separate state variables:
const [name, setName] = useState("Aishwarya");
const [age, setAge] = useState(22);
const [isLoggedIn, setIsLoggedIn] = useState(false);
Complete Example
import { useState } from "react";
function Profile() {
const [name,
setName] = useState("Aishwarya");
const [age, setAge]
= useState(22);
const [isLoggedIn,
setIsLoggedIn] = useState(false);
return (
<div>
<h2>Name:
{name}</h2>
<p>Age:
{age}</p>
<p>
Status:
{isLoggedIn ? "Logged In" : "Logged Out"}
</p>
<button
onClick={() => setAge(age + 1)}>
Increase Age
</button>
<button
onClick={() => setIsLoggedIn(!isLoggedIn)}>
Login / Logout
</button>
</div>
);
}
export default Profile;
Here each state has its own purpose.
name
↓
Stores the user's name
age
↓
Stores the user's age
isLoggedIn
↓
Stores login status
Keeping unrelated values separate can make a component
easier to understand.
State Can Store Different Types of Data
React state is not limited to numbers.
String State
const [name, setName] = useState("");
Example:
setName("Aishwarya");
Boolean State
Boolean state is useful for things that have two possible
conditions.
const [isOpen, setIsOpen] = useState(false);
You can change it with:
setIsOpen(true);
or:
setIsOpen(false);
You can also toggle it:
setIsOpen(!isOpen);
Array State
Arrays are useful when a component needs to store a list.
const [courses, setCourses] = useState([
"HTML",
"CSS",
"JavaScript"
]);
When adding a new item, create a new array instead of
modifying the existing array directly:
setCourses([...courses, "React"]);
The spread operator copies the existing items and adds
"React".
Object State
You can also store an object.
const [student, setStudent] = useState({
name:
"Aishwarya",
age: 22
});
To update the name:
setStudent({
...student,
name:
"Priya"
});
The spread operator keeps the other properties while
replacing the name property.
State Best Practices
Using useState is simple, but following a few good habits
will make your React code easier to maintain.
1. Do Not Change State Directly
Avoid:
count = count + 1;
Use:
setCount(count + 1);
React needs the state setter to know that the value has
changed.
2. Use Meaningful State Names
Avoid unclear names such as:
const [x, setX] = useState("");
A better approach is:
const [username, setUsername] = useState("");
A meaningful name makes the code much easier to understand.
3. Keep State as Simple as Possible
Do not create state for information that can easily be
calculated from existing values.
For example, if you already have:
const [firstName, setFirstName] =
useState("Aishwarya");
const [lastName, setLastName] =
useState("Jadhav");
You normally do not need another state variable for the full
name.
You can calculate it:
const fullName = `${firstName} ${lastName}`;
This avoids storing the same information twice.
4. Use Separate State for Unrelated Values
Instead of putting every small value into one large object,
separate clearly unrelated pieces of state when that makes the component easier
to work with.
For example:
const [name, setName] = useState("");
const [age, setAge] = useState(18);
const [isActive, setIsActive] = useState(true);
Each value has a clear purpose.
5. Use Functional Updates When Previous State Matters
If the new value depends on the old value, use:
setCount(previousCount => previousCount + 1);
This is particularly useful for counters, toggles, and other
state updates based on the previous value.
6. Treat Arrays and Objects as Immutable
Do not directly modify an existing array or object stored in
state.
Avoid:
courses.push("React");
Instead:
setCourses([...courses, "React"]);
For an object, avoid directly changing a property:
student.name = "Priya";
Instead:
setStudent({
...student,
name:
"Priya"
});
Creating a new array or object makes the state update clear
to React.
Complete useState Example
Here is a small example that uses multiple types of state
together.
import { useState } from "react";
function Student() {
const [name,
setName] = useState("Aishwarya");
const [marks,
setMarks] = useState(75);
const [passed,
setPassed] = useState(true);
return (
<div>
<h2>Student Information</h2>
<p>Name:
{name}</p>
<p>Marks:
{marks}</p>
<p>Status:
{passed ? "Passed" : "Failed"}</p>
<button
onClick={() => setMarks(marks + 5)}>
Add 5 Marks
</button>
<button
onClick={() => setPassed(!passed)}>
Change Status
</button>
<button
onClick={() => setName("Priya")}>
Change Name
</button>
</div>
);
}
export default Student;
Example
The program uses three separate states:
const [name, setName] = useState("Aishwarya");
Stores a string.
const [marks, setMarks] = useState(75);
Stores a number.
const [passed, setPassed] = useState(true);
Stores a Boolean value.
Each setter updates only its corresponding state.
How State Updates Work in React
A simple way to understand the process is:
User Action
↓
Button Click / Input / Event
↓
State Setter Function
↓
State Value Changes
↓
React Renders the Component Again
↓
Updated Information Appears on Screen
For example:
Click Increase
↓
setCount(count + 1)
↓
count becomes 1
↓
React renders component
↓
Screen shows Count: 1
This is one of the basic ideas behind interactive React
applications.
Common Mistakes with useState
Mistake 1: Forgetting the import
Incorrect:
const [count, setCount] = useState(0);
If useState has not been imported, the code will not work.
Correct:
import { useState } from "react";
Mistake 2: Changing the state directly
Incorrect:
count++;
Correct:
setCount(count + 1);
Mistake 3: Mutating an array
Incorrect:
items.push("React");
Better:
setItems([...items, "React"]);
Mistake 4: Using unclear state names
Avoid:
const [a, setA] = useState("");
Prefer:
const [email, setEmail] = useState("");
Good names make React programs easier to read and debug.
Frequently Asked Questions
1. What is state in React?
State is information managed by a component that can change
while the application is running. When state changes, React updates the
component's displayed output.
2. What is useState in React?
useState is a React Hook that allows a functional component
to store and update state.
3.What does useState return?
useState returns an array containing two values:
- The
current state value.
- A
function used to update that state.
For example:
const [count, setCount] = useState(0);
Can a component have multiple states?
Yes. A component can use multiple useState calls.
const [name, setName] = useState("");
const [age, setAge] = useState(18);
4. Can useState store an object?
Yes.
const [user, setUser] = useState({
name:
"John",
age: 25
});
5.Can useState store an array?
Yes.
const [items, setItems] = useState([]);
6.Does changing state update the screen?
Yes. When a state update causes a component to render with a
different result, React updates the relevant part of the user interface.
7.Should I change state directly?
No. Use the setter function returned by useState.
Incorrect:
count = 10;
Correct:
setCount(10);
Interview Questions on React State
1. What is state in React?
State is data managed by a component that can change over
time. Updating state can cause React to render the component again with the new
value.
2. What is the useState Hook?
useState is a Hook that lets functional components add and
manage state.
3. What is the syntax of useState?
const [state, setState] = useState(initialValue);
4. Why should state not be modified directly?
Direct modification does not use React's state update
mechanism. The setter function should be used to request a state update.
5. Can one component have multiple state variables?
Yes.
const [name, setName] = useState("");
const [age, setAge] = useState(20);
const [active, setActive] = useState(false);
6. When should you use a functional state update?
Use it when the new state depends on the previous state.
setCount(previousCount => previousCount + 1);
7. Can state contain objects and arrays?
Yes. useState can store strings, numbers, Booleans, arrays,
objects, and other JavaScript values.
Comments
Post a Comment