React Usestate — Free React Tutorial
Learn React Usestate in React with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
TL;DR: Learn React Usestate in React with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.
Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated
React Usestate in React
State is data that changes over time in a React component. Unlike props (which come from the parent), state is local to a component and controlled by the component itself. The `useState` hook is the primary way to add state to functional components. When state updates, React automatically re-renders the component to reflect the new data. This reactive behavior is central to building interactive applications.
The `useState` hook returns an array with two elements: the current state value and a function to update it. Call it at the top level of your component: `const [count, setCount] = useState(0)`. The argument to `useState` is the initial state value. Each component instance has its own independent state — changing state in one component doesn't affect others.
When you call a setState function (like `setCount`), React schedules a re-render. React batches multiple state updates together for performance. Never mutate state directly; always use the setState function. If the new state depends on the old state, pass a function to setState: `setCount(prev => prev + 1)`.
Learn React Usestate step by step with Syllab's free interactive React tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full React course →