Build a Todo App with Pagination, Filters & Optimistic Updates

Question

Accepted Answer

**Requirements**
- CRUD todos (add/toggle/edit/delete) with pagination (5 per page), showing page numbers + prev/next + ellipsis.
- Filters: All / Active / Completed; search by text.
- Optimistic updates: UI updates instantly; rollback on simulated API failure (10% chance).
- Persist to localStorage; URL sync `?page=2&filter=active`.

**Architecture**
- State: `todos: {id, text, done}[]`. Derived: `filtered = todos.filter(f)`, `paginated = filtered.slice((page-1)*5, page*5)`.
- Pagination window algorithm: show first, last, current ±2 with `…`.
- Optimistic: `setTodos(prev => [...prev, newTodo]); try { await api.create(newTodo)} catch { setTodos(prev=>prev.filter(t=>t.id!==newTodo.id)) }`.

**What interviewers look for:** derived pagination, window/ellipsis logic, URL sync via `useSearchParams`, optimistic + rollback, empty states.

**Reference implementation**
```jsx
function usePagination(items, pageSize=5) {
  const [page, setPage] = React.useState(1);
  const total = Math.ceil(item

Build a Todo App with Pagination, Filters & Optimistic Updates

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.