🚀 New React Challenge: Best Practices

Your todo list passes all tests. You ship it. But here's the thing no one tells you about interviews — reviewers don't just check that your code works. They look for the 3 anti-patterns hiding in plain sight. This challenge puts ESLint in the reviewer's seat and asks you to clean up the code without breaking a single test.

👉 https://www.reactchallenges.com/challenges/best-practices

---

🧩 Overview

In a real technical interview, solving the logic is only half the battle. Reviewers are trained to spot lazy useState initializers, derived state hidden inside useEffect, and impure calls during render. This challenge gives you a working todo list and surfaces exactly those violations through automated linting. Fix all 3 warnings without changing how the app behaves.

---

✅ Requirements

• Fix all ESLint warnings without changing app behavior
• All 6 tests must keep passing after your changes
• Resolve these 3 violations:
  • @eslint-react/use-state — pass a lazy initializer instead of calling the function eagerly
  • react-hooks/set-state-in-effect — derive showClearCompleted directly from state, skip the useEffect workaround
  • @eslint-react/purity — move new Date() out of the render path

---

Three small fixes, three big "aha" moments. Whether you're prepping for React interviews or just want to stop shipping code that silently wastes renders, this one will sharpen the way you read your own components. No new features — just cleaner, faster React.

🔥 Start the Challenge Now