Modern Front-End Development for Rails, 2nd Edition

Using Context to Share State

For our app, we’re going to use two React hooks to help us share state. The first hook we’re going to use is useContext, which lets us use a feature of React called a context. In React, contexts allow us to share global data among components without passing that data via props.

To use a context, we surround our code with a special JSX component called a context provider. The context provider is initialized with a value, and then any component inside that provider, no matter how many levels down, can use the useContext hook to give that component access to the data in the context.

The specific data we want to share in our context is a reducer function that will provide our common state and a dispatch function ...