...

/

Provider and Consumer Components

Provider and Consumer Components

In this lesson, we'll explore provider and consumer components.

Provider and Consumer Components

Well, every context object comes with a Provider and Consumer component.

The Provider component provides the value saved in the context object to its children, while the Consumer component consumes the values from within any child component.

I know that was a mouthful, so let’s break it apart slowly.

In the Benny example, we can go ahead and destructure the BennyPositionContext to retrieve the Provider and Consumer components.

Press + to interact
const BennyPositionContext = createContext({
x: 50,
y: 50
})
// get provider and consumer
const { Provider, Consumer } = BennyPositionContext

Since Provider ...