# Best practices

> 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.

- Difficulty: intermediate
- Tags: useState, useEffect, ESLint, best practices
- Estimated time: 20 minutes
- Tests: 6
- Requires subscription: yes

## 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

01. renders the app title
02. renders initial tasks
03. adds a new task
04. deletes a task
05. toggles a task as completed
06. clears completed tasks