useState
useState stores values between renders: const [count, setCount] = useState(0). Call the setter to update state and trigger a re-render. Use the functional form setCount(prev => prev + 1) when new state depends on old.
useState Hook import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
setCount(c => c + 1)}>+
setCount(c => c - 1)}>-
setCount(0)}>Reset
);
}
Test your understanding before moving on
1. Which hook manages local state?
A. useRef
B. useContext
C. useState
D. useReducer
💡 useState is the primary hook for local component state.
2. useState returns:
A. Just the value
B. Just the setter
C. [value, setter]
D. {value, setter}
💡 useState returns an array: const [state, setState] = useState(initial).
3. What triggers a re-render?
A. Calling any function
B. Calling the setState function
C. Reading state
D. Importing a component
💡 Calling the setter function returned by useState triggers a re-render.
4. What is the initial value in useState(0)?
A. null
B. undefined
D. NaN
💡 The argument to useState() is the initial state value — here 0.
5. Functional update — when should you use setState(prev => ...)?
A. Never
B. When new state depends on previous state
C. Only with objects
D. Only in effects
💡 Use functional updates (setState(prev => newVal)) when the new value depends on the old one.