Feeling Rusty on React? These 10 Free Problems Will Tell You Exactly What You Forgot

Been away from React for a while — new job, a break, switched stacks — and not sure where the rust actually is? Instead of re-reading docs, try solving these 10 problems. Each one isolates a single concept, runs real test cases in the browser, and takes 10–15 minutes. If you get stuck, that's the exact spot to go re-learn.

1. Counter with Reset

The most basic hook there is — but "basic" is exactly where rust hides. Build a counter with increment, decrement, and a reset that actually resets to the initial value, not just zero.

Try Counter with Reset Here →

2. usePrevious Hook

Build a custom hook that tracks a value from the previous render. This is the problem that clears up why refs don't trigger re-renders, and why that's different from state.

Try usePrevious Hook Here →

3. Toggle Theme Provider

Set up a provider, consume it in nested components, and toggle state without prop drilling. If Context always felt a little fuzzy, this is the problem that makes it click.

Try Toggle Theme Provider Here →

4. Multi-Step Wizard State

Manage a multi-step form's state with a reducer instead of scattered useState calls. This is the problem that separates "I know useState" from "I actually understand state management."

Try Multi-Step Wizard State Here →

5. Conditional Rendering — Notification Panel

Show and hide UI based on state without the JSX turning into a mess of nested ternaries. A good refresher on when to use short-circuiting vs. early returns.

Try Notification Panel Here →

6. useLocalStorage Hook

Build a hook that persists state to localStorage and syncs back on reload. Great test of whether you can compose useState and useEffect into something reusable.

Try useLocalStorage Hook Here →

7. React Dropdown Menu

Build a custom select dropdown that closes when you click outside it. This is the classic "attach and clean up a document event listener" problem — a very common real-world useEffect pattern.

Try React Dropdown Menu Here →

8. Accordion — Single Expand

Build an accordion where opening one section closes the others. Simple on the surface, but it's a good test of whether you reach for the right shape of state (a single "active id" vs. an array of booleans).

Try Accordion Here →

9. Copy to Clipboard Button

Build a button that copies text and shows a temporary "Copied!" state. Tests whether you can handle an async browser API cleanly inside a hook, including resetting state after a delay.

Try Copy to Clipboard Here →

10. useFetch with In-Memory Cache

Build a data-fetching hook that avoids refetching the same URL twice. This is the one that tells you whether you actually understand effect dependencies and cleanup, or you've just been copy-pasting fetch boilerplate.

Try useFetch with Cache Here →

---

If you can get through all 10 without checking the editorial, you're probably not as rusty as you thought. If two or three trip you up, that's your actual practice list.

All problems run real Jest-style tests directly in the browser at ReactGrind — no setup needed to try them.