If you are new to learning React JS, the very first hook that you will encounter will the useState hook. Understanding useState in React JS is extremely important, because it is the fundamental way of managing dynamic data inside your components.
Table Of Content
- What is useState in React JS?
- Syntax of useState in React
- Why Do We Need useState in React?
- Different Examples of useState in React JS
- 1. useState with String
- 2. useState with Numbers
- 3. useState with Boolean
- 4. useState with Objects
- 5. useState with Arrays
- Updating State Correctly in React
- Difference Between State and Props in React
- Common Mistakes with useState in React JS
- FAQs on useState in React
- Q1: What is useState in React JS used for?
- Q2: Can I use multiple useState hooks in one component?
- Q3: What is the difference between useState and useEffect?
- Real-World Example of useState in React
- Final Thoughts
- Related Reads
In this article, we will break down useState in React, go over why it is important, provide examples for each data type (string, number, array, object), and answer common questions faced by beginners.
You will walk away knowing not only how the useState hook works in React JS, but also using the useState hook proudly in real-world applications.
What is useState in React JS?
The useState Hook gives your functional components easy-to-use built-in state functionality. Before Hooks in React JS, you could only store a state in Class components, so functional components were limited to stateless UI rendering. Now that the useState Hook is part of React, it can create an interface for dynamic storage and data updates in your functional components.
👉 In simple terms: useState allows your React app to remember values between renders.
Example:
import React, { useState } from "react";
function Counter()
{
const [count, setCount] = useState(0);
return (
<div>
<h2>You clicked {count} times</h2>
<button onClick={() => setCount(count + 1)}>Click Me</button>
</div>
);
}
Here, count is the state variable, and setCount is the function to update the state.
Syntax of useState in React
The syntax of useState in React JS is simple:
const [state, setState] = useState(initialValue);
- state → current value of your variable
- setState → function to update the value
- initialValue → default value when the component loads
Why Do We Need useState in React?
The best way to understand when useState is useful is to imagine building an app in which:
- A button must track the number of clicks
- A form temporarily stores user input
- A modal can toggle its state between open and closed
Without the useState Hook, you would have no access to make your components “remember” something. Each render would reset the state to the default value in your component.
Different Examples of useState in React JS
1. useState with String
function Greeting()
{
const [name, setName] = useState("John");
return (
<div>
<p>Hello, {name}!</p>
<button onClick={() => setName("Sarah")}>Change Name</button>
</div>
);
}
2. useState with Numbers
const [count, setCount] = useState(0);
3. useState with Boolean
const [isVisible, setIsVisible] = useState(false);
4. useState with Objects
const [user, setUser] = useState({ name: "Alex", age: 25 });
5. useState with Arrays
const [items, setItems] = useState(["Apple", "Banana"]);
👉 Tip: When updating objects or arrays with useState in React JS, always use the spread operator to avoid overwriting the entire state.
Updating State Correctly in React
One common mistake with useState in React is trying to update the state directly.
❌ Wrong:
count = count + 1;
✅ Correct:
setCount(count + 1);
Difference Between State and Props in React
- State → Managed inside a component (using useState)
- Props → Passed from parent to child component
Understanding this difference helps you structure your React apps better.
Common Mistakes with useState in React JS
Some common mistakes with very new React developers when using useState:
- Updating state directly instead of using the setter
- Forgetting that state updates are asynchronous
- Not initializing state
- Overusing multiple state and not combining them into an object
FAQs on useState in React
Q1: What is useState in React JS used for?
It’s used for adding state (data that changes) in functional components.
Q2: Can I use multiple useState hooks in one component?
Yes! You can use as many as you like.
Q3: What is the difference between useState and useEffect?
- useState → stores values
- useEffect → runs side effects (e.g., fetching data, updating DOM)
Real-World Example of useState in React
Let’s build a to-do list using useState:
import React, { useState } from "react";
function TodoApp()
{
const [tasks, setTasks] = useState([]);
const [input, setInput] = useState("");
const addTask = () => {
setTasks([...tasks, input]);
setInput("");
};
return (
<div>
<h2>My To-Do List</h2>
<input value={input} onChange={(e) => setInput(e.target.value)} />
<button onClick={addTask}>Add Task</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>{task}</li>
))}
</ul>
</div>
);
}
Here we used useState in React with both strings and arrays.
Final Thoughts
Learning to use the useState in React JS is the first step in developing toward an understanding of React Hooks overall. Once you become good with using useState you will find it much easier to learn and understand useEffect, useContext, and useReducer.
If you are a beginning React developer I would suggest trying to build small apps with just the useState Hook in React. Some app examples would be a counter, data entry form, or a simple todo list.
Related Reads
