6 Managing application state

Up to this point, we’ve seen how components can manage their own state with the useState, useReducer, and useRef hooks and load state data with the useEffect hook. It’s common, however, for components to work together, using shared state values to generate their UI. Each component may have a whole hierarchy of descendant components nested within it, chirping and chirruping to be fed data, so state values may need to reach deep down into the descendant depths.

In this chapter, we investigate concepts and methods for deciding how to manage the availability of state values for child components that need to consume them, by lifting state to common parents. In chapter 8, we’ll see how and when React’s Context API can be used to make values available directly to components that need them. Here, we stick to using props to pass state down to children.

6.1 Passing shared state to child components

6.1.1 Passing state from a parent by setting props on the children

6.1.2 Receiving state from a parent as a prop

6.1.3 Receiving an updater function from a parent as a prop

6.2 Breaking components into smaller pieces

6.2.1 Seeing components as part of a bigger app

6.2.2 Organizing multiple components within a page’s UI

6.2.3 Creating a BookableDetails component

6.3 Sharing the state and dispatch function from useReducer

6.3.1 Managing state in the BookablesView component

6.3.2 Removing an action from the reducer

6.3.3 Receiving state and dispatch in the BookablesList component

6.4 Sharing the state value and updater function from useState

6.4.1 Managing the selected bookable in the BookablesView component

6.4.2 Receiving the bookable and updater function in BookablesList

6.5 Passing functions to useCallback to avoid redefining them

6.5.1 Depending on functions we pass in as props