Skip to content

chore: web-api-no-leaked-timeout/fetch (10 warnings) #1468

@steilerDev

Description

@steilerDev

Parent tracking issue: #1455

Summary

Resolve:

  • 8 `@eslint-react/web-api-no-leaked-timeout` warnings
  • 2 `@eslint-react/web-api-no-leaked-fetch` warnings

Both flag side effects started in `useEffect` that aren't cleaned up on unmount — leaked timers fire after the component is gone, and in-flight fetches may set state on unmounted components.

Fix patterns

```tsx
// timeout — before
useEffect(() => {
setTimeout(() => doSomething(), 1000);
}, []);

// timeout — after
useEffect(() => {
const id = setTimeout(() => doSomething(), 1000);
return () => clearTimeout(id);
}, []);

// fetch — before
useEffect(() => {
fetch('/api/foo').then((r) => r.json()).then(setData);
}, []);

// fetch — after
useEffect(() => {
const controller = new AbortController();
fetch('/api/foo', { signal: controller.signal })
.then((r) => r.json())
.then(setData)
.catch((e) => { if (e.name !== 'AbortError') throw e; });
return () => controller.abort();
}, []);
```

Scope

Production code (`client/src/`).

Acceptance Criteria

  • `npm run lint` reports 0 `@eslint-react/web-api-no-leaked-timeout` warnings
  • `npm run lint` reports 0 `@eslint-react/web-api-no-leaked-fetch` warnings
  • No "can't update state on unmounted component" warnings in dev console
  • Behavior preserved (timers still fire when not interrupted; fetches still populate state)

Risk

Low. Standard cleanup pattern, mechanical to apply.

Metadata

Metadata

Assignees

No one assigned

    Labels

    tech-debtTechnical debt cleanup work (lint, refactors, etc.)

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions