[revskill]

I'm surprised that many huge React libraries don't expose its core Context for user to consume.

Context is the most important concept in React.

Actually, a library just need users to provide the right types of Context to be flexible.

I'm tired of the "lock in" API, in which, it doesn't allow me to just get my context data into its arguments API.

In this sense, you can consider Context as the local version of Redux.

[gramstrong]

As someone who stopped doing React development before Context became a "thing", is it possible to ELI5 in a couple sentences why it is such an important concept?

[revskill]

It's important, because you don't need to care about props vs state, instead, just consume the context deep in your component tree.

One use case, is, suppose you have two independent contexts at two branches, now, if you want to share those data to 3rd branch, you just create new context with value from the first two contexts.

[thereare5lights]

This is starting to sound like the scope from Angular 1.

[munchbunny]

Contexts in React are like raw pointers in C++. There are reasons to use them, but every time you do, it should raise eyebrows, because they are finicky, complicated to reason about, and thus full of pitfalls.

[pbedat]

Yep. That's why context should be used very very rarely or never. When I teach react, I try to make a long detour around them. I would not consider it being the most important concept. Its only a side effect model.

[eropple]

IMO, context does a lot to remove the value of MobX from React applications. Not necessarily Redux; Redux gives you some additional stuff, particularly around state tracking and rewinding. But I haven't seen a MobX project where a judiciously used context doesn't solve the same problem within the React-specific ecosystem.

[hombre_fatal]

The value of mobx is that you implicitly link each component to its data dependencies by dereferencing arbitrary paths into your storage objects in the render() function so that the component rerenders only when data at those paths change.

Does the Context achieve this as well? From a quick search, the Context seems to force rerender of any consumer on any change.

[revskill]

You can use library like reselect to optimize. The job of context is simple: implicitly passing down value to deep component.

[draw_down]

React Context is essentially scoped global props (the scope is some subtree of the overall component tree; the props are global to that subtree, any component in the subtree can elect to consume them). Why it's an important concept is that it keeps you from needing to pass props down the tree from each component to its children. This is important because often times those intermediate components don't have any concern with the stuff being passed down, so they shouldn't be concerned with data that doesn't matter to them.

Another way of passing around ~global stuff is Redux, which many people find cumbersome and difficult to understand. And by "many people" I mean me.

[simplify]

Context IS NOT the most important concept in React. It's basically CSS cascading. Not something you want to introduce into your project so easily.

[lewisl9029]

I wouldn't go as far as to say Context is the most important concept in React, but it's also not nearly as bad as CSS cascading.

Context is fully opt in. A Context provider upstream will have no observable effect on your downstream components unless you have a component that explicitly chooses to consume _that particular context_.

I think you're thinking of the old Context API where everything merged onto the same shared context object and read from it implicitly. _That_ was a nightmare, hence why it was never recommended for general use, but the new API doesn't suffer from the same issues.

[revskill]

Yes, theoretically you can ignore props and state, because context could replace both.

[miksuv]

Are you talking about the theme? Can you be more specific?

[revskill]

I mean, when you use this library, you want to "inject" your own context into its system.

Then in all components props, you'll have your own context value at every level deep in the tree.

[temp99990]

Any large application using React is most likely using it with Redux.