Build Provider Tree

buildProviderTree Function

The buildProviderTree function constructs a tree of React context providers based on the array of components with their respective props.

API Reference

buildProviderTree()

A function that constructs a tree of React context providers.

Parameters

ParameterTypeDescription
componentsWithPropsComponentWithProps[]An array of tuples representing React components and their optional props.

Return Value

ReturnsTypeDescription
NoneReact.ComponentType<ProviderProps>A component that wraps the provided components in a nested tree structure using React context providers.

Example

🚫

Avoid this type of provider tree construction.

const root = createRoot(document.getElementById("root"));
root.render(
  <ThemeContext.Provider>
    <UserContext.Provider>
      <QueryClientProvider client={queryClient}>
        <Provider store={store}>
          <IntlProvider locale={usersLocale}>
            <App />
          </IntlProvider>
        </Provider>
      </QueryClientProvider>
    </UserContext.Provider>
  </ThemeContext.Provider>
);
✅
Do this type of provider tree construction.
import { buildProvidersTree } from "@/context/build-provider-tree";
 
const ProvidersTree = buildProvidersTree([
  [ThemeContext.Provider],
  [UserContext.Provider],
  [QueryClientProvider, { client: queryClient }],
  [ReduxProvider, { store }],
  [IntlProvider, { locale: usersLocale }],
]);
 
const root = createRoot(document.getElementById("root"));
root.render(
  <ProvidersTree>
    <App />
  </ProvidersTree>
);
TypographyuseArrayState