Lifting state up

As explained in React Hooks in Action: With Suspense and Concurrent Mode

Lifting state up is the technique of moving shared state from a child component to a common ancestor so multiple components can access it.

Lifting state up moves shared state from a child into a common ancestor, allowing sibling components to consume the same value through props. section 6.0 section 6.2.2

The parent owns the state, passes values to children, and passes an updater or dispatch function when children must trigger changes. A child calls that function; the parent re-renders and updates its children. section 6.1.3 section 6.3

Color picker

Colors stores the selected color with useState and passes color and setColor to ColorPicker. Each color item calls setColor(c), so the picker highlights the selection after the parent re-renders. section 6.1.3

Figure 6.11 BookablesView manages the state with a reducer and passes the selected bookable or the whole state to its children.

Trace how BookablesView manages reducer state and passes either the selected bookable or the whole state to child components. section 6.3

How React Hooks in Action: With Suspense and Concurrent Mode covers it

How deep it goes

Explains parent ownership, prop passing, updater functions, and reducer migration in three implementation steps.

Examples

Uses a color picker and a bookings interface with lists, details, selected items, groups, loading, and error state.

What it assumes

Assumes familiarity with React components, props, useState, and useReducer.

What you can do after

Build it from scratch by relocating state, passing values through props, and exposing updater or dispatch functions to children.

How it connects

Connects state, props, useState, useReducer, dispatch functions, and component re-rendering.

liveBookmanning.com

Read React Hooks in Action: With Suspense and Concurrent Mode on liveBook Get the book at manning.com

Related concepts

• 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.

This explainer was generated by Manning's knowledge graph from the text of React Hooks in Action: With Suspense and Concurrent Mode. The section links point to the parts of the book it draws on.