We use the
useContext hook for passing values to deeply nested components. This is essentially dependency injection.
We frequently use contexts for values which will be used throughout our app, such as theme constants or localized strings.
Suppose we want to use a theme throughout our app.
Without a context, we have to pass the theme as a prop into every component - even those that don't use it! That's both a hassle and may cause unnecessary rerendering.
With a context, the component that actually wants to use the theme can access it directly from the context.