Back to Labs

React Providers

React providers lab

Practice passing data without props

Small, focused context examples you can tweak and break. Read the short notes in each card and then modify the code yourself.

Theme light
App Root: 0 renders
Plan flip themes, log in, fire toasts, read resources, then refactor
Current user Guest

Context basics

Theme channel

Theme light

The theme provider holds minimal state: a string and a toggle. Keep context values small to limit re renders. Try adding font size or color preference and see how quickly consumers pick up the change.

Session data

User provider

This provider owns authenticated state. Because the value is an object, any change causes all consumers to re render. Later, split this context into two: one for data, one for actions.

Guest visitor
Focus reading
Guest

State sharing

Toast workshop

The reducer keeps logic for adding and removing toasts. Notice the stable callbacks to avoid re renders. Experiment with multiple components consuming the same provider.

No toasts yet. Add one and remove it inside the list.

Try this

Practice loop

Use these prompts to practice changing context shape, splitting providers, and controlling renders.

  1. Swap provider order in src/components/educational/labs/react-providers/AppProviders.tsx and notice how prop drilling disappears.
  2. Split the toast context into state and dispatch providers to avoid re renders in heavy trees.
  3. Add a feature flag context that gates part of the UI without touching the rest of the tree.
  4. Move one consumer outside of its provider to trigger the safety error and then fix it.
  5. Replace the login logic with an async call and keep the UI responsive with a loading state.

Methods

Deep dive

React Design Patterns: Provider Pattern

A structured way of managing and passing data through your component tree. Based on the article by Vitor Britto

The Provider Pattern in React is a design pattern that leverages React context to create a structured way of managing and passing data through your component tree. It helps to avoid prop drilling, where you have to pass data down through multiple layers of components, even if some of them do not need the data.

The Anatomy of the Provider Pattern

The structure typically consists of three parts:

1. Context

Defines the context variable using createContext.

import { createContext } from 'react';
const UserContext = createContext({});
2. Provider

Wraps children with a dynamic context value.

const UserProvider = ({ children }) => {
  const [name, setName] = useState('World');
  return (
    <UserContext.Provider value={{ name, setName }}>
      {children}
    </UserContext.Provider>
  )
}
3. Hook

Custom hook to access the context easily.

const useUser = () => {
  return useContext(UserContext);
}

Note: All components that consume the context will rerender when the context value changes. Split your data into different providers to improve performance.

Conclusion

One of the main advantages of the Provider Pattern is that it reduces the risk of introducing bugs when refactoring code. With the Provider Pattern, if you need to rename a prop, you only have to change it in one place.

However, use it carefully. While it is great for sharing data across multiple components, overusing it can lead to performance issues if not managed correctly.

Advanced pattern

Localized Provider: Shopping Cart

A complex widget can have its own private context. The CartProviderwraps only this component, so its state does not leak to the rest of the app.

Observation: Add items and watch the Cart Renderscount. Notice how the app root render count does not increase. This confirms the state is isolated.

Cart: 0 renders

Products

Your Cart0 items

Your cart is empty. Add some products.

Advanced pattern

Localized Provider: Form Wizard

Multi step forms benefit from a provider to hold draft data between steps without passing props through every view.

Step 1: Personal Info

Reading

Further study

Keep the docs handy. Skim these before changing code so you can connect the patterns to the examples above.