Preparing for a frontend interview? One of the fastest ways to level up is by solving small, focused React exercises that test the exact skills interviewers look for: state management, effects, forms, accessibility, performance, and custom hooks.
From ReactChallenges.com, I handpicked 7 free challenges (don’t require a subscription) that cover the fundamentals you’ll likely be asked about.
1. Counter Component — useState vs useRef
- 🔗 https://www.reactchallenges.com/challenges/1
- Time: 15 min
- Difficulty: Beginner
-
Concepts:
useState,useRef
A classic challenge for understanding why components re-render (or don’t). Perfect for explaining the difference between state and refs during an interview, and when to use each.
2. Uncontrolled Form
- 🔗 https://www.reactchallenges.com/challenges/3
- Time: 15 min
- Difficulty: Beginner
- Concepts: forms, uncontrolled inputs, refs
Many developers only use controlled forms. This challenge forces you to work directly with the DOM and refs, which is great for discussing trade-offs and alternative form patterns.
3. Wikipedia Search — Fetching + State + Lists
- 🔗 https://www.reactchallenges.com/challenges/4
- Time: 45 min
- Difficulty: Intermediate
- Concepts: fetching, lists, UX, timestamps
Fetching and state handling are interview staples. Here you’ll work with a real API, loading/error states, and a search history list — small details that often show up in interview tasks.
4. React Chrono — Start / Pause / Stop
- 🔗 https://www.reactchallenges.com/challenges/7
- Time: 45 min
- Difficulty: Beginner
-
Concepts: timers,
useEffect, cleanup
Timers reveal whether you really understand how useEffect works, closures, and cleanup logic — common interview talking points. It also produces a nice demo to show in a portfolio.
5. Accessible Accordion
- 🔗 https://www.reactchallenges.com/challenges/8
- Time: 30 min
- Difficulty: Beginner
-
Concepts: accessibility (A11y),
aria-*,useId, semantics
Accessibility is becoming a must-have skill. This challenge covers semantic headings, aria-expanded, aria-controls, keyboard behavior, and multiple/single modes.
6. useToDo & useLocalStorage Hooks
- 🔗 https://www.reactchallenges.com/challenges/11
- Time: 15 min
- Difficulty: Beginner
- Concepts: custom hooks, persistence, logic separation
Interviewers love seeing reusable logic. These hooks help you understand how to extract logic cleanly and persist data — great for mid-level or senior interviews.
7. useDebounce vs useThrottle
- 🔗 https://www.reactchallenges.com/challenges/14
- Time: 30 min
- Difficulty: Intermediate
- Concepts: performance, debounce, throttle, optimization
Implementing debounce and throttle from scratch shows strong understanding of performance and event frequency control — often asked during technical interviews.
Bonus: useActionState (Modern Form Handling)
- 🔗 https://www.reactchallenges.com/challenges/15
- Time: 30 min
- Difficulty: Intermediate
-
Concepts: modern form patterns,
useActionState
A modern pattern especially relevant if interviewing for roles using Next.js or newer frameworks. A great bonus challenge.
How to use these challenges to prepare
- Solve 2–3 challenges every few days (don’t rush all at once).
- In the interview, explain what you did and why: decisions, trade-offs, alternatives.
- Practice explaining a bug you hit and how you solved it — that always impresses interviewers.
Top comments (0)