Component Patterns
Compound components, HOCs, render props, polymorphic types and error boundaries.
- Hard~35 min
Polymorphic Components with TS
Create a Text component that accepts an as prop (e.g., 'h1', 'span', 'a') and correctly inherits the HTML…
- Polymorphic TS
Start Challenge - Hard~35 min
Synthetic Events vs Native
If you e.stopPropagation() on a React onClick, does it stop a document.addEventListener('click') handler…
- Events
Start Challenge - Easy~10 min
Component Definition inside Render
Why is this extremely bad for performance and UX (focus loss)?
- Re-renders
Start Challenge - Hard~35 min
The Master Refactor
This is a "God Component." It mixes fetch logic, filtering logic, and UI. It also re-calculates the filter on…
- Refactoring
Start Challenge - Hard~35 min
Error Boundary Implementation
When a component throws an error, the entire app crashes with a white screen. Implement an Error Boundary to…
- Error Boundary
Start Challenge - Hard~35 min
Compound Component Pattern
Create a flexible Tabs component using the Compound Component pattern. The component should allow users to…
- Compound
Start Challenge - Hard~35 min
Custom Hook with Complex Dependencies
Create a useDebounce hook that debounces a value. The hook should accept a value and delay, and return the…
- Custom Hooks
Start Challenge - Hard~35 min
Render Props Pattern
Create a MouseTracker component using the Render Props pattern. The component should track mouse position and…
- Render Props
Start Challenge - Hard~35 min
Higher-Order Component (HOC)
Create a Higher-Order Component that adds authentication checking to any component. The HOC should redirect…
- HOC
Start Challenge - Hard~35 min
Composing Custom Hooks
Create a complex useForm hook by composing simpler hooks: useInput, useValidation, and useSubmit.
- Custom Hooks
- Composition
Start Challenge - Medium~20 min
Composable Custom Hooks
Create a set of composable custom hooks that can be combined for complex async operations with loading…
- Custom Hooks
- Composition
Start Challenge - Medium~20 min
Cross-Component Event Bus
Two distant components (a notification toaster and a save button) need to talk without prop drilling and…
- Pub/Sub
- Events
Start Challenge - Hard~35 min
Custom Hooks Kit: Extract Five Reusable Hooks
A demo component works perfectly but is a tangle: debounced search, a localStorage-persisted counter, a…
- Custom Hooks
Start Challenge