Free · Checked by real tests

React Hooks Practice
useState, useEffect & Custom Hooks

Real react hooks exercises — not tutorials, not theory. Write the hook, run the tests, see exactly where your mental model breaks.

useState Exercises

Master the most-used hook in React — state that's predictable and easy to reason about.

#001Beginner

Counter with reset

Hooks & State

#002Beginner

Controlled text input

Forms & Events

useEffect Practice

Side effects, timers, cleanup functions, and dependency arrays — where most React bugs actually live.

#006Intermediate

useInterval with pause

Custom Hooks

#017Advanced

useFetch with in-memory cache

Custom Hooks

Custom Hooks

Compose built-in hooks into reusable abstractions you'd actually ship in production.

#004Intermediate

useDebounce Custom Hook

Custom Hooks

#005Beginner

usePrevious Hook — Track Previous Value

Custom Hooks

State Management Patterns

Beyond useState — reducers and state machines for complex, multi-step UI.

#013Advanced

Multi-step wizard state

Hooks & State

Why practice React hooks like this

  • • Every exercise is checked by real automated test cases, not a checklist
  • • Progressive difficulty — from useState basics to reducer-based state machines
  • • No video-watching — you write code, tests tell you exactly what's wrong
  • • Built for React interview prep as much as day-to-day skill building

Frequently asked questions

What are the best React hooks to practice first?

Start with useState for basic state management, then move to useEffect for side effects like timers and data fetching. Once comfortable, custom hooks like useDebounce teach you to compose reusable logic.

Is useState or useEffect harder for beginners?

useState is usually easier since it's synchronous and predictable. useEffect trips people up because of dependency arrays, cleanup functions, and timing — it takes more deliberate practice.

Do I need to know hooks before React interviews?

Yes. Hooks are the standard way to write React today, and interviewers routinely test useState, useEffect, and custom hook design — especially for mid-level and senior frontend roles.

What's the difference between a hook and a custom hook?

Built-in hooks like useState and useEffect are provided by React itself. A custom hook is a function you write that combines built-in hooks into reusable logic, like useDebounce or usePrevious.

Ready for the full library?

500+ react coding challenges across hooks, performance, forms, and FAANG-level problems.

Browse all problems