Overview

In a technical interview, solving the logic is only half the battle — reviewers also judge your code's quality. A todo list that works perfectly can still hide anti-patterns like derived state in effects, impure renders, or eager initializers that degrade performance. This challenge is different: instead of just checking that your code passes tests, the platform also runs ESLint with React best-practice rules and surfaces every violation. Fix the 3 lint warnings to prove you don't just make it work — you make it right.

Requirements

• Fix all ESLint warnings in the starter code without changing the app behavior.
• All 6 tests must continue passing after your changes.
• The warnings you must resolve are:
  • @eslint-react/use-state — replace the eager function call in useState with a lazy initializer.
  • react-hooks/set-state-in-effect — derive showClearCompleted directly from state instead of syncing it via useEffect + useState.
  • @eslint-react/purity — stop calling new Date() during render.

Notes

• useState(someFunction()) calls the function on every render — pass the function reference instead: useState(someFunction).
• If a value can be computed from existing state, you don't need a separate useState + useEffect to keep it in sync.
• new Date() is impure (returns a different value each call). Compute it once outside the component or wrap it in useState(() => new Date()).

Tests

1. renders the app title
2. renders initial tasks
3. adds a new task
4. deletes a task
5. toggles a task as completed
6. clears completed tasks

Lint

1. @eslint-react/use-state — useState calls function eagerly, should be lazy initializer
2. react-hooks/set-state-in-effect — derived state synced via useEffect instead of computed directly
3. @eslint-react/purity — new Date() called during render