Add Login Functionalities Using Context API

Introduction to the Context API

In this lesson, we’ll cover the Context API, which allows different pages, such as dashboard and profile, to use the same user data once the user logs in.

What is the Context API?

We need props to pass data or states to child components. However, as an application becomes more extensive and more complex in terms of number of components and amount of data, managing the states between child components becomes more difficult.

The Context API provides a way to pass data through the component tree without having to pass the props manually in each child component. The Context API is used when there’s data or a global state for the component tree, such as a username or an authenticated state.

Using the Context API

Steps to create and use the context API,

The steps to create and use the Context API are as follows:

1. Create a Context using the React.createContext() method.
2. The Context object that we created in the first step comes with a Provider React component that allows consuming components to subscribe to context changes. We use this Provider to wrap all the components that need to share their state or data with a Context.Provider.
3. The Provider component takes a value as a prop so that we can pass

...