useContext is a React Hook that lets you read and subscribe to context from your component.

Reference

useContext(SomeContext)
- SomeContext****
  - The context that you’ve previously created with createContext.
  - The context itself does not hold the information,
  - it only represents the kind of information you can provide or read from components.

useContext returns the context value for the calling component.
It is determined as the value passed to the closest SomeContext.Provider above the calling component in the tree.
If there is no such provider
- then the returned value will be the defaultValue
- you have passed to createContext for that context.
The returned value is always up-to-date.
- React automatically re-renders components that read some context if it changes.

useContext() call in a component is not affected by providers returned from the same component.

<aside> 💡 The corresponding <Context.Provider> needs to be above the component doing the useContext() call.

</aside>
React automatically re-renders all the children that use a particular context starting from the provider that receives a different value.
- The previous and the next values are compared with the Object.is comparison.
- Skipping re-renders with memo does not prevent the children receiving fresh context values.
If your build system produces duplicates modules in the output (which can happen with symlinks), this can break context.
- Passing something via context only works if SomeContext that you use to provide context and SomeContext that you use to read it are exactly the same object, as determined by a === comparison.

Usage