concept state and dispatch function in category react

This is an excerpt from Manning's book React Hooks in Action MEAP 04. Login to get full access to this book.

Table 4.2 lists the steps from Figure 4.10, describing what is happening and including short discussions of each one.

Step	What happens?	Discussion
1	React calls the component.	To generate the UI for the page, React traverses the tree of components, calling each one. React will pass each component any props set as attributes in the JSX.
2	The component calls useReducer for the first time.	The component passes the initial state and the reducer to the useReducer function. React sets the current state for the reducer as the initial state.
3	React returns the current state and the dispatch function as an array.	The component code assigns the state and dispatch function to variables for later use. The variables are often called state and dispatch, or the state may be destructured into further variables.
4	The component sets up an event handler.	The event handler may listen for user clicks, timers firing or resources loading, for example. The handler will dispatch an action to change the state.
5	The component returns its UI.	The component uses the current state to generate its user interface and returns it, finishing its work. React compares the new UI to the old and updates the DOM.
6	The event handler dispatches an action.	An event fires and the handler runs. The handler uses the dispatch function to dispatch an action.
7	React calls the reducer.	React passes the current state and the dispatched action to the reducer.
8	The reducer returns the new state.	The reducer uses the action to update the state and returns the new version.
9	React calls the component.	React knows the state has changed so must recalculate the UI.
10	The component calls useReducer for the second time.	This time, React will ignore the arguments.
11	React returns the current state and the dispatch function.	The state has been updated by the reducer and the component needs the latest values. The dispatch function is the exact same function as React returned for the previous call to useReducer.
12	The component sets up an event handler.	This is a new version of the handler and may use some of the newly updated state values.
13	The component returns its UI.	The component uses the current state to generate its user interface and returns it, finishing its work. React compares the new UI to the old and updates the DOM.

While BookableDetails needs only the selected bookable, BookablesList needs the rest of the state the reducer returns and a way to continue dispatching actions as users select bookables and switch groups. Figure 7.11 also shows BookablesView passing the reducer’s state and dispatch function to BookablesList.