You are viewing a free preview of this lesson.
Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.
While props are data passed into a component, state is data managed inside a component that can change over time. When state changes, React re-renders the component to reflect the new values in the UI.
useState is the primary Hook for adding state to a function component:
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
useState takes the initial value as its argument and returns a two-element array: the current state value and a setter function. By convention, these are destructured with names like [value, setValue].
React batches state updates and re-renders the component once after all updates in the same event are processed. Because of this, you should not rely on the current state value inside the setter if you are computing the next state from the previous one. Use the functional update form instead:
setCount((prev) => prev + 1);
This ensures prev is always the most recent value, even if multiple updates are batched together.
State can hold objects and arrays, but you must treat them as immutable. Always create a new object or array rather than mutating the existing one:
const [user, setUser] = useState({ name: "Alice", age: 25 });
// Correct: spread to create a new object
setUser({ ...user, age: 26 });
// Wrong: mutating state directly (never do this)
// user.age = 26;
// setUser(user);
For arrays, use non-mutating methods like map, filter, and the spread operator to produce new arrays.
You can call useState multiple times in one component to manage separate pieces of state:
function Form() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
return (
<form>
<input value={name} onChange={(e) => setName(e.target.value)} />
<input value={email} onChange={(e) => setEmail(e.target.value)} />
</form>
);
}
Use state for any data that:
Do not put derived values in state — compute them directly during rendering instead. And do not mirror props in state; just read props directly.
Subscribe to continue reading
Get full access to this lesson and all 10 lessons in this course.