liveBook · Manning

Context object

As explained in React in Depth

Machine context is the state-machine data container that holds information shared across the overall flow and manipulated during transitions.

A context object stores data that belongs to an entire state-machine flow rather than to one state or transition. Transitions manipulate it through actions, allowing business data and workflow state to move together. section 8.7

Use context when data must survive or support multiple states:

  • Keep shared collections such as a list of things in context. section 8.7.1
  • Store cross-state selection such as the current thing, then update or reset it through transitions. section 8.7.1

List and current selection

A machine can initialize context with { things: [], currentThing: null }. An ADD event appends a thing, SEE records its id as currentThing, and SEE_ALL resets the selection. A detail-view hook reads the selected item from context, while a list-view hook reads an item by id; each hook sends only the events valid for its state.

How React in Depth covers it

How deep it goes
Explains flow-wide storage, transition actions, selectors, and persistence, while stopping short of general state-machine internals.
Examples
Demonstrates lists, current selections, item actions, selector hooks, and persisted XState machine state.
What it assumes
Assumes React hooks and state-machine concepts, while demonstrating context, actions, selectors, and persistence through a concrete application.
What you can do after
Build it from scratch with XState context, assign actions, React providers, selector hooks, and event-sending hooks.
How it connects
Connects context objects with state machines, transitions, actions, selectors, React hooks, and local storage.

Also explained in

Compare how 2 books explain context object →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of React in Depth. The section links point to the parts of the book it draws on.