Context in react #64
Context in react #64
Conversation
| In React the primary mechanism for communication between your components is through properties, or `props`, for short. Parent components can pass properties down to their children: | ||
|
|
||
| ```js | ||
| const SomeParentComponent = () => { |
There was a problem hiding this comment.
I'd remove Some prefixes to ease readability.
| The key thing about this communication is that it's _explicit_. Looking at the code above, you know how the components are communicating, where the `letMeKnowAboutSomeThing` function comes from, who calls it, and which two components are in communication. [You can see this in action on CodePen](http://codepen.io/jackfranklin/pen/vgvYOa?editors=0011). | ||
|
|
||
| This property of React, its explicitness of data passing between components, is one of its best features. React is very explicit as a rule, and this is in my experience leads to clearer code that's much easier to maintain and debug when something goes wrong. You simply have to follow the path of props to find the problem. | ||
|
|
There was a problem hiding this comment.
I would add a paragraph exposing the need for context:
One issue you might find in big apps is that you might need to pass props from a top level
ParentComponentto really a deeply nestedChildComponent. The components in between will probably have no use the these props and should probably not even know about them.
|
|
||
| This property of React, its explicitness of data passing between components, is one of its best features. React is very explicit as a rule, and this is in my experience leads to clearer code that's much easier to maintain and debug when something goes wrong. You simply have to follow the path of props to find the problem. | ||
|
|
||
| As you might have guessed, context is a way to break this explicitness. When a component defines some data onto its _context_, any of its descendants can access that data. That means any child further down in the component tree can access data from it, without being passed it as a property. Let's take a look at context in action. |
There was a problem hiding this comment.
I like to think of context as a props portal between a Parent and a Child. hat do you think about using this wording to describe what context is?
There was a problem hiding this comment.
There was a problem hiding this comment.
Ooo I like the use of the word portal. That's perfect!
|
|
||
| As you might have guessed, context is a way to break this explicitness. When a component defines some data onto its _context_, any of its descendants can access that data. That means any child further down in the component tree can access data from it, without being passed it as a property. Let's take a look at context in action. | ||
|
|
||
| First, on the _parent component_, we define two things: |
There was a problem hiding this comment.
I'd insert a title here like
How to use
context?
|
The rest of the article (when to (not) use) is |
for me!
|
@ArnaudRinquin thank you! I've added some diagrams & updated based on your suggestions. |
|
|
||
| ## When to use context | ||
|
|
||
| If you're a library author, context is useful. Libraries like [React Router use context](https://github.com/ReactTraining/react-router/blob/v4/packages/react-router/modules/Router.js#L13) to allow the components that they provide application developers to communicate. When you're writing a library that provides components that need to talk to each other, or pass values around, `context` is perfect. |
There was a problem hiding this comment.
I just though about it: another famous context based library is react-redux. It'd be nice to cite it as an example or even base your analogy on it as it seems easier to understand compared to react-router.
|
|
||
| One issue you might find in big apps is that you might need to pass props from a top level `ParentComponent` to a deeply nested `ChildComponent`. The components in between will probably have no use the these props and should probably not even know about them. When this situation arises, you can consider using React's context feature. | ||
|
|
||
| Context acts like a portal in your application in which components can place data that can be accessed without being passed through explictly. |
There was a problem hiding this comment.
I'd avoid saying place data as it can be data but also callbacks props. I would just use props
No description provided.