Topic
React state
State is information a React component retains between renders and uses to determine what it displays.
At a glance
- Common state hook
- useState
- Shared-state pattern
- Lift state to a common parent
Overview
State is information a React component retains between renders and uses to determine what it displays. Updating state requests a new render. When multiple components need coordinated values, their shared state can be placed in an appropriate common parent.
State and events
An event handler can request a state update in response to an action. React then renders using the updated value. Local variables alone do not provide the same retained, rendering-aware behavior.
One owner for shared values
Duplicating the same changing value in several components creates opportunities for disagreement. A common owner can pass the value and update callbacks to the components that need them.
Sources and review
MOOR's explanatory text is supported by the following source links.
- State: a component's memory — React
- Sharing state between components — React