React: useContext usage note

useContext provides an simple way to allow child components to directly access high level parent's data and methods without relaying the information through multiple levels. Context in react has two parts, one is context provider to wrap the root level parent component, and one is useContext to provide access for low level child components. The react provides a key function of createContext function, which returns a context object, the context object includes everything for getting the context provide, and specify the context's data member types, and accessing the context data members.

 

Regarding the context provider, contextProvider is a just regular react component, generated by createContext method. The only unique thing about it is, it has a property named as value, which must be set to an instance of the context type specified in createContext method. In the application's root component, any children wrapped directly or indirectly below contextProvider component can access the context data member using useContext hook.

useContext works in similar way as react component props, if context method provides set method, then children component can call this method to change values implemented in context provider component. However, if the context provider just sets the value as a regular js variable, then updating the js variable's value or object reference will not trigger rendering the provider component and its children components. Basically useContext just provides a special prop that can be accessed by all children components with useContext hook. Similar to other regular component properties, context.Provider just creates a snapshot of the current value that can be accessed by the children components.

So, unlike useState, context does not participate in the React change detection, there is no set method to update context value as useState does. A common practice is implementing the context's value using the useState hook in the provider component, so once state object is updated by the children component, it will trigger the rendering of the provider component, which will lead context.Provider component and its children component to update to the new state value.  

Note, in the root component that sets the context provider, there is no need to call useContext to get the context value, as it already has the context value to set as attribute of context provider. But in case useContext is called to get the context value, you will see the default value instead of the value set by myContext.Provider is returned. The reason is as when useContext(myContext) is called, which happens at the beginning of component function, myContext.Provider has not been executed, so it makes sense to return the default value by useContext(myContext) method. However, any children component wrapped within myContext.Provider will get the new value set by myContextProvider.