useState lets a function component own a value that persists across renders. React returns the current value and an updater; calling the updater changes state and prompts React to recalculate the UI. This keeps an interface such as a selectable booking list synchronized with user actions. section 2.0 section 2.2.2
Call the Hook with an optional initial value and commonly use array destructuring: const [value, setValue] = useState(initialValue). The names are your choice, although set is the conventional updater prefix. Direct variable assignment does not notify React. section 2.2.1 section 2.2.2
Use the updater according to the state you are changing:
- Pass a replacement value for simple state: setBookableIndex(3). The new value replaces the old one, and React schedules a re-render when it changes. section 2.2.3 section 2.5
- Pass a function when the next value depends on the previous one: setBookableIndex(i => (i + 1) % bookablesInGroup.length). React supplies the latest state. section 2.2.5
- Treat object state as a replacement, not a merge. Copy unchanged properties before changing one: setState(state => ({ ...state, bookableIndex: index })). section 2.2.3
- Call useState once for each independently managed value. React uses Hook call order to associate each value with its updater. section 2.3 section 2.3.1
- Pass an initializer function for expensive initial-state computation: useState(() => initialState). React runs it only when it first calls the component. section 2.5
A selectable booking list
A BookablesList can track its group and selected item separately: const [group, setGroup] = useState("Kit"); const [bookableIndex, setBookableIndex] = useState(0); A select event calls setGroup(e.target.value), while a button calls setBookableIndex(i). React then re-renders the list and applies the selected styling from the current state. A Next button can safely advance with setBookableIndex(i => (i + 1) % bookablesInGroup.length). For shared state, a parent such as BookablesView can hold const [bookable, setBookable] = useState() and pass both value and updater to child components. section 2.3.1 section 2.2.5 section 6.4.1
Follow the state-to-UI cycle: changing a tracked value invokes its updater, React re-renders the component, and the returned UI reflects the latest state. section 2.0
