useState Hook in React
useState Hook in React – Complete Beginner Guide (2026)
The useState hook is one of the most important features in React. It allows functional components to manage state and create dynamic user interfaces. Understanding useState is essential for building interactive React applications.
What is useState Hook in React
React useState is a built-in hook that allows you to add state to functional components. It returns a state variable and a function to update that state.
Syntax of useState Hook
state represents the current value, and setState is used to update it.
Basic Example of useState
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
In this example, the count value updates when the button is clicked.
How useState Works
When the state changes using the setter function, React re-renders the component and updates the UI. This makes applications dynamic without refreshing the page.
Using Multiple State Variables
const [age, setAge] = useState(25);
You can create multiple state variables inside a component.
Rules of useState Hook
Always call useState at the top level of the component
Do not use it inside loops or conditions
Use meaningful names for state variables
Advantages of useState Hook
Simplifies state management
Works inside functional components
Improves code readability
Reduces complexity compared to class components
Best Practices for useState
Keep state minimal
Avoid unnecessary updates
Use descriptive variable names
Update state using setter functions only
Real-World Use Cases
Handling form inputs
Managing UI states like toggle and counters
Storing user data temporarily
Creating interactive components
Internal Linking Strategy
FAQs
What is useState in React
useState is a hook used to manage state in functional components.
What does useState return
It returns a state variable and a setter function.
Can we use multiple useState hooks
Yes, multiple useState hooks can be used in a component.
When should we use useState
It is used when you need to manage dynamic data in a component.