Context API Introduction in React Component Communication

Create a User Authentication Context

Build a React Context to manage user authentication state and provide login/logout functions.

Expected output: A working authentication context that components can consume to check login status and trigger login/logout.

Hint: Use createContext, useState, and provide the context to components that need user info.

Refactor Prop Drilling with Context

Identify a component tree with prop drilling and refactor it to use Context API for data sharing.

Expected output: Simplified component tree without prop drilling and correct data access via context.

Hint: Create a context for the shared data and replace prop passing with context consumption.

React Context API solves the problem of prop drilling by allowing data to be shared globally across components without passing props through every intermediate component.

You consume context in a functional component using the useContext hook by passing the context object created with createContext.

You should avoid using Context API for frequently changing or local state to prevent performance issues and instead use local state or other state management libraries.