Standardise AbortController cancellation in setup and server health hooks
Add abortable API signals for setup status and server health/log fetches, document hook cancellation patterns, and cover stale refresh cancellation with tests.
This commit is contained in:
31
frontend/src/hooks/README.md
Normal file
31
frontend/src/hooks/README.md
Normal file
@@ -0,0 +1,31 @@
|
||||
# React Hook Fetch Cancellation
|
||||
|
||||
This folder follows a shared convention for network fetch cancellation in React hooks.
|
||||
|
||||
## Patterns
|
||||
|
||||
### 1. Hooks with manual refresh
|
||||
|
||||
Hooks that expose a `refresh()` callback must use a long-lived `AbortController` stored in a ref:
|
||||
|
||||
- `const abortRef = useRef<AbortController | null>(null);
|
||||
- Call `abortRef.current?.abort()` before starting a new request.
|
||||
- Create a fresh controller before every `refresh()` invocation.
|
||||
- Pass `controller.signal` to the API function.
|
||||
- In the cleanup effect, abort the controller when the hook unmounts.
|
||||
- After each `await`, check `signal.aborted` before updating state.
|
||||
|
||||
This prevents stale responses from overwriting newer results and avoids React state updates after unmount.
|
||||
|
||||
### 2. One-shot mount-only requests
|
||||
|
||||
Hooks that only fetch once inside `useEffect` and do not expose a manual refresh may use a local controller:
|
||||
|
||||
- Create `const controller = new AbortController();` inside the effect.
|
||||
- Pass `controller.signal` to the request.
|
||||
- Abort it in the effect cleanup.
|
||||
- This is the simplest correct pattern for single-fetch hooks.
|
||||
|
||||
### 3. Do not use boolean cancelled flags for network requests
|
||||
|
||||
A boolean `cancelled` flag is not sufficient because it does not stop the underlying fetch. Abort signals are the correct cancellation mechanism for fetch-based hooks.
|
||||
Reference in New Issue
Block a user