State

State is data that belongs to a component and can change over time. When state changes, React automatically re-renders that component with the new data — you never manually update the DOM.

You create state with the useState hook. It returns two things: the current value, and a function to update it. By convention, they're named [something, setSomething].

You must always use the setter function — never modify state directly. Doing myArray.push(item) or count = count + 1 won't trigger a re-render. setCount(count + 1) will.

State is private to the component that owns it. If two components need to share state, you lift it up to their nearest common parent and pass it down as props.