Creating a Global State with Context API

Global state is state that many components share, and in a Context setup it lives in one ordinary component near the top of the tree. That component holds the value with useState and delivers it through a provider. To see each step, you will build a login status that any screen can read and change.

Creating the Context and the Provider

Create a file named AuthProvider.js. It holds the context object and the component that owns the state.

import { createContext, useState } from 'react';

export const AuthContext = createContext(null);