Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

April 21, 2021 04:43 pm GMT

The React Context hell

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>    </>  )}

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])

Clone and return a new React element using element as the starting point. The resulting element will have the original elements 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))

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

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>  )}

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

alfredosalzillo / react-pendulum

A React context utility library

react-pendulum

Use the power of the Pendulum and change the course of the duel!
react-pendulum a React Context utility libraries

Install

Using npm

npm install --save react-pendulum

Using yarn

yarn add react-pendulum

Components

MultiProvider

MultiProvider

A component to nicely and readably wrap components with multiple providers

Props

providers the array of providers instances to wrap to the children

import React, { Component, createContext } from 'react'import { MultiProvider } from '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={[          <

View on GitHub

Original Link: https://dev.to/alfredosalzillo/the-react-context-hell-7p4

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To