Hacker News Reader

Comment by gramstrong | Hacker News Reader

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?

View on HN

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.

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

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.

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.

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.

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.

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

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.

Reply on news.ycombinator.com