useState
useState is a React Hook that provides a function component with a state value and a function for updating it.
React Quickly, Second Edition
useState is a React Hook function that initializes component state and returns its current value together with a function for updating it.
- How it is used
- Makes functional components interactive by retaining local values and updating the displayed UI through setters.
- How deep it goes
- Works through initialization, destructuring, setter forms, hook ordering, and multiple states, then points to more advanced state-management approaches.
- Examples
- Uses a click counter, differently initialized counters, a filtered to-do list, and an email input updated from a property.
- What you can do after
- Build it from scratch in a functional component to initialize, display, and update local UI state.
React Hooks in Action: With Suspense and Concurrent Mode
useState is a React Hook that adds a state value and its state-updating function to a function component.
- How it is used
- Manages local component values and synchronizes rendered UI with user-driven state changes.
- How deep it goes
- Explains initialization, replacement, functional updates, object copying, multiple calls, and lifted state, without descending into React internals.
- Examples
- Uses BookablesList selection, group drop-downs, next-item navigation, counters, and parent-managed selected bookables.
- What you can do after
- Build stateful function components, update values from events, preserve prior object properties, and share state through props.
Read how React Hooks in Action: With Suspense and Concurrent Mode explains useState →
React in Depth
useState is a React hook that adds a state value and its updater function to a function component.
- How it is used
- Uses useState for component state in forms and as a baseline for application data distributed through context.
- How deep it goes
- Works through initializer inference, union and collection types, setter errors, and application-level placement, without detailing hook internals.
- Examples
- Uses an appointment response, a tag form, a goal tracker, and a dark-mode inspector session.
- What you can do after
- Apply it via React useState with explicit TypeScript types when initial values omit valid future states.
Related concepts
- React hookkind of · A React Hook is a function-based API that enables function components to access state, effects, context, and other React capabilities.
- componentused by · A software component is a modular part of a larger system that provides related functionality and interacts with other parts through defined boundaries or interfaces.
- stateproduces · State is information or a configuration describing the condition of a system, entity, or computation at a particular time and potentially influencing subsequent behavior or decisions.
- useReduceralternative to · useReducer is a React Hook that manages component state by applying a reducer function to the current state and dispatched actions.
- arrayproduces · An array is an indexed, ordered collection of elements arranged in one or more dimensions, with elements accessed by position.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.