ReactInteractiveIntermediate

React Hooks Lab

Fix leaky effects and bad keys, complete a hooks snippet, order an effect's lifecycle and match hooks to their jobs.

Topics you will practise

  • Effect cleanup
  • Keys
  • Hooks basics
  • Effect lifecycle
  • Hook purposes

5 activities. Check each answer to see an explanation.

Results are saved only in this browser.

How this works

  • Do, then check

    Each activity (find the bug, fill the blanks, put in order, match pairs) is checked when you press Check answer, followed by an explanation.

  • Fresh order each time

    Items are shuffled on every attempt, so retrying tests understanding instead of memory of positions.

  • Skip and hints

    Skip an activity or use a hint when one is available. Skipped activities count as skipped in your results.

  • Saved on your device

    Scores and streaks are stored in your browser only. There is no account.

Topics covered

  • Effect cleanup
  • Keys
  • Hooks basics
  • Effect lifecycle
  • Hook purposes

React learning roadmap

Want to learn more? A Mental Model for React Hooks