How to creating a React provider

What is a provider in React?

A provider is a React component that provides data and/or services to subscribed descendant components. The data and/or services are not passed through props, instead they use React’s context feature.

Why use providers?

  1. You use a component throughout your app. It appears all across your component tree.
  2. This component requires a common data source and/or service.

Providers are an answer for providing that data source to a component any descendent component, no matter how deeply nested.

An example of component that needs a common data source is a localization component. You give the component a key <LocalizationText key="welcomeMessage" /> and the resulting HTML should be <span>Welcome!</span> or <span>¡Bienvenido!</span> if the language is set to Spanish.

In the <LocalizationText> example, we require access to an object of translated messages. Without providers, you would either use a global variable or pass the messages down through all the layers of components as a prop. Both of these have their pitfalls. With a provider component pattern, you have a way to give descendent components the messages without needing to pass it through props. This is done by sharing the messages in React’s component context.

Why you should not use providers?

First thing to know is that providers require using React’s context feature. Context are an experimental feature of React and may change.

Second reason is that props are a great way of passing data because it is easy to trace. You should use them as your default. Providers start making data magically appear. There are cases where this may make sense like localization messages. There are cases where you are backed into it using providers: a common example is using multiple ReactRedux providers for improving rendering performance.

If your data is important to the operation of your app and it is not negatively affecting the performance of your app, then do not use providers. If you don’t want to worry about possibly big changes to the React API, then do not use providers.

What is context in React?

Context is a feature in React that let’s you automatically pass data down the through the tree without explicitly passing it through the props.

How to make your own provider and providee components

Provider component

Your provider component needs to do three things:

  1. Define the name and type of the shared value
  2. Add the shared value into the context
  3. Render the wrapped child component

Providee component

Your providee component needs to do two things:

  1. Define the name of the context it wishes to access
  2. Access the context by adding a second parameter for stateless function components or through this.context for class based components

Test it live

Troubleshooting tips

  1. Your provider component can only take a single component. If you try to wrap more than one, you’ll get the following error: Uncaught Invariant Violation: Provider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object..
  2. Your providee component must be a descendent of your provider component otherwise the context value will be a default empty value.

Go in-depth with the topic

To learn more about context with an in-depth explanation of the React Redux Provider, watch the video series on the topic at Egghead.io.