DEV Community

The React Context hell

Alfredo Salzillo on April 21, 2021

What is the React Context hell? Like the callback hell, usual when jQuery was used for everything, the React Context hell is the nasty c...

Read full post

• Apr 22 '21

// src/components/AppProviders.js

export default function AppProviders({ children }) {
  return (
    <Context1 value={value}>
      <Context2 value={value2}>
        <Context3 value={value3}>{children}</Context3>
      </Context2>
    </Context1>
  );
}

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

Mike Bybee • Apr 22 '21

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

Andrew Schimelpfening • Apr 22 '21

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

Kay Gosho • Apr 24 '21

Agree.

Dor Shinar • Apr 21 '21

Why is it better?

shadowtime2000 • Apr 21 '21

I am wondering this to. It seems like unnecessary complexity and abstraction that makes the code just look messier.

Ivan Jeremic • Apr 21 '21 • Edited

My last article is on this topic dev.to/ivanjeremic/to-use-context-...

Peter Vivo • Apr 25 '21

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.

Cody Seibert • Apr 22 '21

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

Alfredo Salzillo • Apr 23 '21

For example?

Linh Truong Cong Hong • Apr 25 '21

Recoil?

Alfredo Salzillo • Apr 25 '21

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.