lukas.pupkalipinski/BanGUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stabilize function references in useJails with useCallback

Browse Source 
Previously, the withRefresh helper and all operations (startJail, stopJail, setIdle, reloadJail, reloadAll) were recreated on every render because they were defined in the hook body without useCallback. This caused unnecessary re-renders of child components using React.memo when parent state changed.

Now each operation is wrapped in useCallback with [load] as its dependency. This ensures function references remain stable between renders, allowing React.memo optimizations to work correctly in JailOverviewSection.

Tests confirm that function references are now stable between consecutive renders.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Lukas
2026-04-23 09:18:31 +02:00
parent 1bcc336c9b
commit 10c534d090
3 changed files with 96 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
Docs/Tasks.md
View File

@@ -1,31 +1,3 @@
### TASK-STATE-01 — Auth Errors Silently Swallowed in `useRegexTester` and `useLogPreview`
**Where found**
`frontend/src/hooks/useRegexTester.ts` and `frontend/src/hooks/useLogPreview.ts`. Each hook's catch block handles errors only as `err instanceof Error`, which catches `ApiError` (a subclass of `Error`), but does not call `handleFetchError`. The `handleFetchError` utility calls `isAuthError` and returns early without setting UI error text, allowing the global `SESSION_EXPIRED_EVENT` listener in `AuthProvider` to handle the redirect. By bypassing `handleFetchError`, auth errors (401/403) are displayed as UI error text (`err.message`) instead of triggering the session expiry flow.
**Goal**
Replace the ad-hoc catch blocks in both hooks with `handleFetchError`:
```ts
} catch (err: unknown) {
if (signal.aborted) return;
handleFetchError(err, setError, "Regex test failed");
}
```
`handleFetchError` already imports `isAuthError` and returns early for auth errors, allowing the global handler to take over.
**Possible traps and issues**
- Confirm that `SESSION_EXPIRED_EVENT` is being listened to in `AuthProvider` and that it triggers navigation to `/login`. It is — this was verified in the architecture review.
- After the fix, a 401 during a regex test will show no error text (the auth handler navigates away), which is correct behaviour.
**Docs changes needed**
Add a convention to `Docs/Web-Development.md`: "All hook catch blocks must use `handleFetchError` rather than directly calling `setError`, so auth errors are routed to the session-expiry flow."
**Why this is needed**
When a session expires while the user is in the Regex Tester, they see a confusing "Unauthorized" error message in the tester UI instead of being cleanly redirected to the login page.
---
### TASK-STATE-02 — `withRefresh` in `useJailList` Creates New Function References Every Render
**Where found**