Context Flashcards
What does context do?
Context provides a way to pass data through the component tree without having to pass props down manually at every level. It prevents having to implement props drilling. It’s used to avoid passing props through every level of the component tree.
Passing data from parent & child and what context provides
In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props that are required by many components within an application.
Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
When to use context?
Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
Sometimes the same data needs to be accessible by many components in the tree, and at different nesting levels. Context lets you “broadcast” such data, and changes to it, to all components below. Common examples where using context might be simpler than the alternatives include managing the current locale, theme, or a data cache.
Before you use context
Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.
If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.
React.createContext()
const MyContext = React.createContext(defaultValue);
Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.
The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This default value can be helpful for testing components in isolation without wrapping them. Note: passing undefined as a Provider value does not cause consuming components to use defaultValue.
Context.Provider
Allows us to declare the data that we want available throughout our component tree.
Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.
The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.
All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes. The propagation from Provider to its descendant consumers (including .contextType and useContext) is not subject to the shouldComponentUpdate method, so the consumer is updated even when an ancestor component skips an update.
Class.contextType
MyClass.contextType = MyContext; outside the class or
The contextType property on a class can be assigned a Context object created by React.createContext(). Using this property lets you consume the nearest current value of that Context type using this.context. You can reference this in any of the lifecycle methods including the render function.
Context.Consumer
{value => /* render something based on the context value */}
Allows any component in the component tree that needs data from context to be able to subscribe to it.
A React component that subscribes to context changes. Using this component lets you subscribe to a context within a function component.
Requires a function as a child. The function receives the current context value and returns a React node. The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the value argument will be equal to the defaultValue that was passed to createContext().
Context.displayName
Context object accepts a displayName string property. React DevTools uses this string to determine what to display for the context.
// "MyDisplayName.Provider" in DevTools // "MyDisplayName.Consumer" in DevTools
How many layers to use Context?
Don’t use Context to avoid drilling props down just one or two layers. Context is great for managing state which is needed by large portions of an application. However, prop drilling is faster if you are just passing info down a couple of layers.
Where to place Provider?
Always wrap the Provider around the lowest possible common parent in the tree - not the app’s highest-level component. No need for overkill.
Saving local state and context
Avoid using Context to save state that should be kept locally. So if you need to save a user’s form inputs, for example, use local state and not Context.
