Let's look into more detail what has been done.įirst, const UserContext = createContext('Unknown') creates the context that's going to hold the user name information. The simplest way to pass data from a parent to a child component is when the parent assigns props to its child component: Including the components that are indirectly affected by the context - the ancestors of context consumers! 3. During unit testing, you would have to wrap the consumer components into a context provider. Secondly, adding context makes it more difficult to unit test the components. Creating the context, wrapping everything in the provider, using the useContext() in every consumer - this increases complexity. On the other side, you should think carefully before deciding to use context in your application.įirst, integrating the context adds complexity. Context solves the props drilling problem: when you have to pass down props from parents to children. The main idea of using the context is to allow your components to access some global data and re-render when that global data is changed. If the consumer isn't wrapped inside the provider, but still tries to access the context value (using useContext(Context) or ), then the value of the context would be the default value argument supplied to createContext(defaultValue) factory function that had created the context. If the context value changes (by changing the value prop of the provider ), then all consumers are immediately notified and re-rendered. You can have as many consumers as you want for a single context. Again, in case if the context value changes, will re-render its render function.