The provider pattern

The provider pattern in React is where one component in the tree makes data accessible to all its descendants. This is usually accomplished using the React Context primitive.

Use case – the prop drilling problem

The key use case for the provider pattern is to avoid the prop drilling problem.

A large majority of the time, a component’s main input is the prop it receives from its parent component. A state management pattern to share state between components in React is to lift state up. Lifting state up means to store relevant state in a common ancestor of the components that require the shared state.

As stated in the React.js docs (https://react.dev/learn/sharing-state-between-components)

When you want to coordinate two components, move their state to their common parent. Then pass the information down through props from their common parent

This can lead to prop drilling when the common parent has multiple components between it and...