The React Context hell
#react#javascript#typescript#showdev
Alfredo Salzillo

Alfredo Salzillo @alfredosalzillo

About: 🐺

Location:
Italy
Joined:
Nov 8, 2018

The React Context hell

Publish Date: Apr 21 '21
55 19

What is the React Context hell?

Like the callback hell, usual when jQuery was used for everything, the React Context hell is the nasty code you get taking advantage of the React Context API.

const App = () => {
  // ... some code
  return (
    <>
     <ReduxProvider value={store}>
      <ThemeProvider value={theme}>
       <OtherProvider value={otherValue}>
        <OtherOtherProvider value={otherOtherValue}>
         {/** ... other providers*/}
                                <HellProvider value={hell}>
                                  <HelloWorld />
                                </HellProvider>
         {/** ... other providers*/}
        </OtherOtherProvider>
       </OtherProvider>
      </ThemeProvider>
     </ReduxProvider>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

How to fix it?

To clean up the nasty code you get from taking advantage of React Context API we need a way to nest multiple Context.Provider without passing them as children of each other.

To achieve that we can use the React.cloneElement API.

The cloneElement API

React.cloneElement(
  element,
  [props],
  [...children]
)
Enter fullscreen mode Exit fullscreen mode

Clone and return a new React element using element as the starting point. The resulting element will have the original element’s props with the new props merged in shallowly. New children will replace existing children. key and ref from the original element will be preserved.

We can use the cloneElement API to reduce a collection of providers, this way we don't have to nest them inside each other.

return [
  <ReduxProvider value={store} />,
  <ThemeProvider value={theme} />,
  <OtherProvider value={otherValue} />,
  <OtherOtherProvider value={otherOtherValue} />,
  // ...others,
  <HellProvider value={hell} />,
  <HelloWorld />,
].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev))
Enter fullscreen mode Exit fullscreen mode

The last element of the array is the content of the app.

Using reduceRight we preserve the nesting to make the HelloWorld element a child of all the providers.

To make it simpler to use we can implement a MultiProvider component.

import React from 'react'

const nest = (
  children: React.ReactNode,
  component: React.ReactElement
) => React.cloneElement(component, {}, children)

export type MultiProviderProps = React.PropsWithChildren<{
  providers: React.ReactElement[]
}>

const MultiProvider: React.FC<MultiProviderProps> = ({
  children,
  providers
}) => (
  <React.Fragment>
    {providers.reduceRight(nest, children)}
  </React.Fragment>
)

export default MultiProvider
Enter fullscreen mode Exit fullscreen mode

Now we can refactor the example using the MultiProvider.

const App = () => {
  return (
    <MultiProvider
      providers={[
        <ReduxProvider value={store} />,
        <ThemeProvider value={theme} />,
        <OtherProvider value={otherValue} />,
        <OtherOtherProvider value={otherOtherValue} />,
        // ...others,
        <HellProvider value={hell} />,
      ]}
    >
      <HelloWorld />
    </MultiProvider>
  )
}
Enter fullscreen mode Exit fullscreen mode

You can find an implementation of MultiProvider inside the react-pendulum library.

GitHub logo alfredosalzillo / react-pendulum

A React Context utility library.

react-pendulum

A React Context utility library.

NPM JavaScript Style Guide codecov

Install

Using npm

npm install --save react-pendulum
Enter fullscreen mode Exit fullscreen mode

Using yarn

yarn add react-pendulum
Enter fullscreen mode Exit fullscreen mode

Components

MultiProvider

A component to clean up the nasty code you get from taking advantage of React Context API.

Props

  • providers the array of providers instances to wrap to the children 
import React, { Component, createContext } from 'react'
import { MultiProvider } from 'react-pendulum'
const FirstNameContext = createContext<string>('John')
const LastNameContext = createContext<string>('Doe')

const HelloWorld = () => {
  const firstName = useContext(FirstNameContext)
  const lastName = useContext(LastNameContext)
  return <>{`Hello ${firstName} ${lastName}`}</>
}

class App extends Component {
  render() {
    return (
      <MultiProvider
        providers={[
          <FirstNameContext.Provider value='Yugi' />,
          <
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Comments 19 total

  • Dor Shinar
    Dor ShinarApr 21, 2021

    Why is it better?

  • Volodymyr Yepishev
    Volodymyr YepishevApr 22, 2021

    That's pretty neat 🤓

  • ​​​​​​
    ​​​​​​Apr 22, 2021
    // src/components/AppProviders.js

export default function AppProviders({ children }) {
  return (
    <Context1 value={value}>
      <Context2 value={value2}>
        <Context3 value={value3}>{children}</Context3>
      </Context2>
    </Context1>
  );
}
    Enter fullscreen mode Exit fullscreen mode 
    // src/index.js

import ReactDOM from "react-dom";
import App from "./App";
import AppProviders from './components/AppProviders'

const rootElement = document.getElementById("root");
ReactDOM.render(
  <AppProviders>
    <App />
  </AppProviders>,
  rootElement
);
    Enter fullscreen mode Exit fullscreen mode
    • Mike Bybee
      Mike BybeeApr 22, 2021

      Exactly. No point digging into internals when you can just import.

    • Andrew Schimelpfening
      Andrew SchimelpfeningApr 22, 2021

      This looks way cleaner IMO. Keep it simple and easy to read.

    • Kay Gosho
      Kay GoshoApr 24, 2021

      Agree.

  • Cody Seibert
    Cody SeibertApr 22, 2021

    You could just use a real state management library instead of context.

    • Alfredo Salzillo
      Alfredo SalzilloApr 23, 2021

      For example?

      • Linh Truong Cong Hong
        Linh Truong Cong HongApr 25, 2021

        Recoil?

        • Alfredo Salzillo
          Alfredo SalzilloApr 25, 2021

          So you don't use react router and have a BrowserRouter in your code? Or if you use CSS in JS solution, you don't have a kind of ThemeProvider? Or you put both in a recoil state?
          Ah and you still need the RecoilRoot, a provider.

          • Cody Seibert
            Cody SeibertApr 26, 2021

            I could see what you mean, but no we use riot router, don’t do css in js, and use cerebral js, so we have maybe one provider nested out app.

  • K-Sato
    K-SatoApr 23, 2021

    Having a bit too many react contexts was very relatable! Didn't even know the React.cloneElement API till now! Thank you!

  • Linh Truong Cong Hong
    Linh Truong Cong HongApr 23, 2021

    I wish React could have something like Services of Angular.

    • Alfredo Salzillo
      Alfredo SalzilloApr 23, 2021

      You can use mobx if you want some spaghetti 🍝 in your project.

  • Rosel
    RoselApr 23, 2021

    KISS advocates: 👁👄👁

  • Peter Vivo
    Peter VivoApr 25, 2021

    Good point to alert context hell!
    I simple skip use context, instead works with simple useReducer, and pass down actions and state in props. That way give more simple component, because my component don't have outer dependency - expect props, so easy join together in quite complex app.

  • Jonathan Gamble
    Jonathan GambleJun 1, 2023

    I think I made an even simpler one here - dev.to/jdgamble555/freakin-easy-re..., let me know your thoughts

Add comment