Introduction
The useState Hook is one of the most commonly used Hooks in React. It allows function components to create and manage state. With useState, we can store values such as numbers, strings, booleans, arrays, and objects, and update them when users interact with the application. In this chapter, you will practice the useState Hook through 10 solved questions, starting with its basic syntax and moving toward practical examples. React js useState Hook practice questions with solutions help to understand the concepts.
1. What is the useState Hook in React?
useState is a React Hook that allows a function component to add and manage state.
Example:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return <h2>{count}</h2>;
}
export default Counter;
Here:
countis the current state value.setCountis the function used to update the state.0is the initial value.
Answer: useState allows a React function component to store and update state.
2. What is the syntax of useState?
The basic syntax is:
const [state, setState] = useState(initialValue);
For example:
const [name, setName] = useState("Rahul");
Here:
name→ current state valuesetName→ state update function"Rahul"→ initial value
The names name and setName are chosen by the developer.
For example, a counter can use:
const [count, setCount] = useState(0);
Answer: useState(initialValue) returns an array containing the current state value and a function for updating that state.
3. How do you create a counter using useState?
A counter can store its value using useState.
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;
Initially, the count is 0.
When the button is clicked:
setCount(count + 1);
increases the value by 1.
Answer: Use useState(0) to create the counter state and call its setter when the button is clicked.
4. How do you update a string using useState?
State does not have to be a number. You can also store and update strings.
import { useState } from "react";
function App() {
const [name, setName] = useState("Rahul");
return (
<div>
<h2>Hello {name}</h2>
<button onClick={() => setName("Aman")}>
Change Name
</button>
</div>
);
}
export default App;
Initially:
Hello Rahul
After clicking the button:
Hello Aman
Answer: Use the state setter function to replace the current string value with a new value.
5. How do you use useState with a boolean value?
Boolean state is useful for features such as show/hide, on/off, and open/close.
import { useState } from "react";
function App() {
const [isVisible, setIsVisible] = useState(true);
return (
<div>
{isVisible && <p>Hello React!</p>}
<button onClick={() => setIsVisible(!isVisible)}>
Show / Hide
</button>
</div>
);
}
export default App;
Here:
const [isVisible, setIsVisible] = useState(true);
stores either true or false.
The expression:
!isVisible
changes true to false and false to true.
Answer: Boolean state is useful when a UI element needs to switch between two states.
6. How do you create multiple states using useState?
A component can use useState multiple times.
import { useState } from "react";
function Student() {
const [name, setName] = useState("Riya");
const [age, setAge] = useState(20);
const [course, setCourse] = useState("React.js");
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
<p>Course: {course}</p>
</div>
);
}
export default Student;
Here, three separate states are created:
const [name, setName] = useState("Riya");
const [age, setAge] = useState(20);
const [course, setCourse] = useState("React.js");
Each state has its own setter function.
Answer: You can call useState multiple times to manage separate pieces of state.
7. How do you update state using the previous state value?
When the new state depends on the previous state, it is recommended to use the functional updater form.
For example, increasing a counter:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increase = () => {
setCount(previousCount => previousCount + 1);
};
return (
<div>
<h2>Count: {count}</h2>
<button onClick={increase}>
Increase
</button>
</div>
);
}
export default Counter;
Here:
previousCount => previousCount + 1
uses the previous state value to calculate the next value.
This approach is especially useful when multiple state updates may be scheduled together.
Answer: Use the functional updater form when the next state depends on the previous state.
8. How do you use useState with an array?
useState can store an array.
import { useState } from "react";
function App() {
const [items, setItems] = useState([]);
const addItem = () => {
setItems([...items, "React"]);
};
return (
<div>
<button onClick={addItem}>
Add Item
</button>
<p>{items.join(", ")}</p>
</div>
);
}
export default App;
The initial value is an empty array:
useState([])
When adding a new item:
setItems([...items, "React"]);
a new array is created containing the existing items and "React".
Answer: Arrays can be stored in state, and updates should create a new array rather than directly modifying the existing one.
9. How do you use useState with an object?
Objects can also be stored in state.
import { useState } from "react";
function Student() {
const [student, setStudent] = useState({
name: "Aman",
age: 21
});
const changeName = () => {
setStudent({
...student,
name: "Rohit"
});
};
return (
<div>
<h2>{student.name}</h2>
<p>Age: {student.age}</p>
<button onClick={changeName}>
Change Name
</button>
</div>
);
}
export default Student;
The spread operator:
...student
keeps the existing properties while replacing the name property.
Answer: When updating an object in state, create a new object and preserve the properties you do not want to change.
10. Build a practical Counter using useState.
Create a counter with Increase, Decrease, and Reset buttons.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const increase = () => {
setCount(previousCount => previousCount + 1);
};
const decrease = () => {
setCount(previousCount => previousCount - 1);
};
const reset = () => {
setCount(0);
};
return (
<div>
<h2>Counter: {count}</h2>
<button onClick={increase}>
Increase
</button>
<button onClick={decrease}>
Decrease
</button>
<button onClick={reset}>
Reset
</button>
</div>
);
}
export default Counter;
How it works
The counter starts at:
useState(0)
The Increase button uses:
setCount(previousCount => previousCount + 1);
The Decrease button uses:
setCount(previousCount => previousCount - 1);
The Reset button uses:
setCount(0);
This example demonstrates the main use of useState: storing a value, updating it, and allowing React to reflect the new state in the UI.
Answer: useState provides both the current state value and a setter function that can be used to update the component’s state.
Key Takeaways
useStateis a React Hook used to manage state in function components.- Import
useStatefrom React before using it. useState()accepts an initial value.- It returns the current state value and a state setter function.
- The setter function should be used to update state.
- A component can use
useStatemultiple times. - State can store strings, numbers, booleans, arrays, objects, and other JavaScript values.
- Use the functional updater when the next state depends on the previous state.
- When updating arrays or objects, avoid directly mutating the existing state.
- State updates allow React to keep the UI synchronized with changing data.
FAQs
1. What is the useState Hook in React?
useState is a React Hook that allows function components to create and manage state.
2. What does useState() return?
It returns an array containing the current state value and a function used to update that state.
const [count, setCount] = useState(0);
3. Can we use useState multiple times in one component?
Yes. A component can use multiple useState calls to manage different pieces of state.
4. Can useState store an array?
Yes. For example:
const [items, setItems] = useState([]);
5. Can useState store an object?
Yes. For example:
const [user, setUser] = useState({
name: "Rahul",
age: 21
});
6. Why should we use a functional updater with useState?
When the next state depends on the previous state, the functional updater helps calculate the new value from the latest previous state.
setCount(previousCount => previousCount + 1);
7. Can we directly modify React state?
No. State should be updated through its setter function. For arrays and objects, create a new array or object instead of directly mutating the existing state.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
