React Context API for State Management

Create a User Authentication Context

Build a context to store and provide user authentication status and a function to log in and log out.

Expected output: A React app where components can access and update authentication status via context.

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

Optimize Context Value

Modify your context provider to memoize the context value to prevent unnecessary re-renders.

Expected output: Context consumers only re-render when actual context data changes.

Hint: Use React.useMemo to memoize the value object passed to the Provider.

It solves the problem of prop drilling by allowing components to access shared state directly without passing props through intermediate components.

You use the useContext hook by passing the context object to it, which returns the current context value.

Avoid using Context API for state that changes frequently or is local to a few components, as it can cause unnecessary re-renders and complexity.