In this video, Emmanuel Henri provides an overview of what the Context API is and how it can be used.
- If you're completely new to Reacts Context API, and why you should use it, or even when is a good idea to use it, this is a perfect introduction for you. If you want to get to code right away, feel free to skip this video. When we create our state at the top level of a React Component Tree, typically we need to pass down our props from one component to another. This can be quite repetitive and redundant as our application grows. Facebook being the biggest consumer of React Code, faced this issue like all of us. And the React Team was determined to find a solution. This is why the Context API was created. The Context API is basically a way, with special syntax to pass props directly into the component that needs it. Without the redundancy of passing props from one component to another. If we look at the picture here, this is the typical method of passing props from top to bottom. In this case, which is the Apple use, where we pass values from App.js to News.js to NewSingle.js. But does the Context API always is the perfect approach to all cases? No. In fact, it's an option we have in our tool shed to pass values. Top-down approach might still be the right way to go. So when do you use Contexts? When you want to share global data. Items that seem redundant to pass. If you go to examples, coming right out of Reacts Documentation, are Theme Props, CSS Props or even Language Definition Props. Any kind of items that could be used across. And if you're trying to implement the Context CPI, and start feeling like you can't keep track of your Component Tree and it's data, most likely Context isn't the right choice. Always consider both options.
- Creating a context object
- Implementing the code for updating context
- Updating context from a nested component
- What to avoid when working with context
- How the node tree in React applies to context
- Consuming multiple contexts