Context API is a feature added in Reacy 16.3 that allows to share states across the entire application.

Less prop drilling ( passing props down manually at every level )

particularly useful for managing global data that needs to be shared between multiple components

It can be useful as well to store data retrieved from external sources such as API or databases and make it available to all components.

s a component wrapped in the component tree that is responsible for providing the data ( state ) to its child components

 props, which is the data you want to share

typically you want to wrap your top-level component or a higher-level component with the context provider to make the data available to all its children components. Such as 

A component that consumes the data provided by the Context Provider.

will automatically re-render whenever the data it consumes changes to ensure it is up to date.

 accepts any kind of value ( even an object ).

Theming - change the appearance of your application from light to dark? put it into context so all its child components can update

Current Account - need to know the current logged-in user, and you need it for your components to use if the user has permission on the specific component

Routing - rerouting your user if it’s logged-in account has expired, or maybe you just want to redirect them to another part of your site.

Managing States - or you only want to pass some state to a lower component or maybe parent component?

https://react.dev/learn/passing-data-deeply-with-context#use-cases-for-context

How to use React Context API ( Theme toggling)

Let’s create a Theming Context that toggles our app theme from dark to light mode.

 - custom hooks that access theme and toggleTheme function.


 - component that will wrap in our application that will provide the theme state and the toggleTheme function

Use the Theme in our MainContent component

https://codesandbox.io/s/react-context-api-5pjh9p

Tags

Learning React Context API