Practice & Assessment
Test your understanding of Component Patterns and Context API
Multiple Choice Questions
5What problem does the Context API primarily solve?
When does React.memo prevent a re-render?
What is the defining feature of the compound component pattern?
What must an HOC do to prevent prop loss in the wrapped component?
How does a render prop differ from a regular prop?
Coding Challenges
1Authentication Context Provider
Build an AuthContext that stores a user object (null when logged out) and exposes login(userData) and logout() functions via context. Create a useAuth custom hook wrapping useContext(AuthContext). Build a simple app with two routes (simulated with conditional rendering): a public Login page and a protected Dashboard. The Dashboard shows user info and a logout button. The Login page shows a login form that sets user state. Use AuthContext.Provider at root. No external auth or routing libraries. Estimated time: 25 minutes.
Mini Project
Multi-Theme Design System Starter
Build a small design system with theming. Create a ThemeContext providing current theme (light/dark) and a toggleTheme function. Build these components using compound or HOC patterns: Card (with Card.Header, Card.Body, Card.Footer compound API), Button (with variant prop: primary/secondary/ghost), and a ProtectedRoute HOC that renders children only if user is authenticated via AuthContext, else shows a 'login required' message. Demonstrate all components on one page with a theme toggle button. Use React.memo on Card and Button.