React Hooks in Action

8 Managing state with the Context API

This chapter covers

• Providing state via the Context API and its Provider component
• Consuming context state with the useContext hook
• Avoiding unnecessary re-renders when updating state values
• Creating custom context providers
• Splitting shared state across multiple contexts

We’ve seen state encapsulated within components, lifted to shared parents, in form fields, persisted across renders, and pulled in from a database, and we’ve used a whole bunch of hooks to help us set up and work with that state. Our approach has been to keep the state as close to the components that use it as possible. But it’s not uncommon for many components, nested on multiple branches, to hunger for the same juicy worms, the same ...