DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for No More React Context Hell
Denis Maushov
Denis Maushov

Posted on

No More React Context Hell

If you always wanted it to look like this

  <Providers providers={[
    <FooContext.Provider value="foo" />,
    <BarContext.Provider value="bar" />,
    <BazContext.Provider value="baz" />,
  ]}>
    <App />
  </Providers>,
Enter fullscreen mode Exit fullscreen mode

here is your Providers Component:

const Providers = ({providers, children}) => {
  const renderProvider = (providers, children) => {
    const [provider, ...restProviders] = providers;

    if (provider) {
      return React.cloneElement(
        provider,
        null,
        renderProvider(restProviders, children)
      )
    }

    return children;
  }

  return renderProvider(providers, children)
}
Enter fullscreen mode Exit fullscreen mode

Enjoy!

Like, share and etc

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.