A Guide to React Context and useContext() Hook
The React context provides data to components no matter how deep they are in the components tree. The context is used to manage global data, e.g. global state, theme, services, user settings, and more.
In this post, you'll learn how to use the context concept in React.
1. How to use the context
Using the context in React requires 3 simple steps: creating the context, providing the context, and consuming the context.
A. Creating the context
The built-in factory function createContext(default) creates a context instance:
javascript import { createContext } from 'react' ; const Context = createContext ( 'Default Value' );
The factory function accepts one optional argument: the default value.
B. Providing the context
Context.Provider component available on the context instance is used to provide the context to its child components, no matter how deep they are.
To set the value of context use the value prop available on the <Context.Provi...