useState Hook

Introducing State

Props let you pass data into a component, but what about data that changes over time? That's what state is for.

State is a component's private, mutable data. When state changes, React automatically re-renders the component.

The useState Hook

The most fundamental hook in React is useState. It returns a pair: the current state value and a function to update it.

const [count, setCount] = useState(0)

The argument to useState is the initial value. You can use any data type: numbers, strings, booleans, objects, or arrays.

Updating State

Never mutate state directly. Always use the setter function. When you call setCount(newValue), React schedules a re-render with the new state.