Initial state is the value supplied when a stateful component or state-management mechanism is first initialized. With React's useReducer, it works with a reducer to produce the component's first current state; later dispatches produce updated state and trigger rendering. section 3.2.3 section 3.2
Use initial state to establish the values and relationships a component needs before interaction:
- Pass a reducer and initial-state value to useReducer; receive the current state and dispatch function. section 3.2.3
- Treat the initial-state arguments as initialization inputs: React uses them on the component's first invocation and ignores them on subsequent invocations. section 3.2.3
- Represent related values together when actions update them together, such as group, selected index, details visibility, and bookables. section 3.2.2
Generating initial state from a prop
A WeekPicker derives its first week object from a date by passing getWeek as useReducer's initialization function: const [week, dispatch] = useReducer(reducer, date, getWeek); This separates state generation from the component and runs expensive generation only during initialization. section 3.3.4
const [state, dispatch] = useReducer(reducer, initialState);
Inspect the minimal useReducer call that pairs a reducer with initial state and destructures the returned state and dispatch function. section 3.2.3
