DEV Community

Cover image for The React Context hell

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...
Collapse
 
reedbarger profile image
Reed Barger
// 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
Collapse
 
stereoplegic profile image
Mike Bybee

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

Collapse
 
727021 profile image
Andrew Schimelpfening

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

Collapse
 
acro5piano profile image
Kay Gosho

Agree.

Collapse
 
dorshinar profile image
Dor Shinar

Why is it better?

Collapse
 
shadowtime2000 profile image
shadowtime2000

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

Collapse
 
ivan_jrmc profile image
Ivan Jeremic • Edited

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

Collapse
 
pengeszikra profile image
Peter Vivo

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.

Collapse
 
codyseibert profile image
Cody Seibert

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

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

For example?

Collapse
 
linhtch90 profile image
Linh Truong Cong Hong

Recoil?

Thread Thread
 
alfredosalzillo profile image
Alfredo Salzillo

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.

Thread Thread
 
codyseibert profile image
Cody Seibert

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.

Collapse
 
k_penguin_sato profile image
K-Sato

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

Collapse
 
jdgamble555 profile image
Jonathan Gamble

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

Collapse
 
linhtch90 profile image
Linh Truong Cong Hong

I wish React could have something like Services of Angular.

Collapse
 
alfredosalzillo profile image
Alfredo Salzillo

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

Collapse
 
bwca profile image
Volodymyr Yepishev

That's pretty neat 🤓

Collapse
 
roselpadilla profile image
Rosel

KISS advocates: 👁👄👁