Sharing State - Venue Component

Lifting state up and passing state down

Hooks and useState work cleanly when the state is encapsulated inside one component, but components often have to share state. Sometimes state is shared among just one subtree of DOM elements on the page, but sometimes state is shared across a page. We’ll talk about more complex state patterns in Managing State in React, but here we will only cover the simplest version of one common scenario where state is shared among parent and child components.

In this React pattern, when there is a common parent to all the components that need that state, the state is typically owned by the common parent. The parent sends the raw values down to the child components as props and typically also sends a function that the child components should call to change the parent state. When the child components call that function, the parent state changes. Then the parent component re-renders, causing the child components to re-render with new prop values. This pattern is often called “lifting state up” and “passing state down.”