Refactor DashboardFilterBar to use props exclusively, eliminate dual state source
- DashboardFilterBar now requires all filter props (timeRange, onTimeRangeChange, originFilter, onOriginFilterChange) instead of falling back to context - Removed useDashboardFilters() hook dependency from DashboardFilterBar, BanTrendChart, and JailDistributionChart - Updated DashboardPage to explicitly pass all filter values and callbacks from context to components - Made props required on BanTrendChart and JailDistributionChart - Updated all tests to reflect new prop requirements - This eliminates the silent dual-source behavior that could lead to subtle bugs when components are used with different data sources Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -1,30 +1,3 @@
|
||||
### TASK-STATE-02 — `withRefresh` in `useJailList` Creates New Function References Every Render
|
||||
|
||||
**Where found**
|
||||
`frontend/src/hooks/useJailList.ts`. The `withRefresh` helper is defined inside the hook body without `useCallback`. It wraps an operation and calls `refresh()` after it completes. Because it is recreated every render, `startJail`, `stopJail`, `setIdle`, and `reloadJail` — which are all produced by `withRefresh(...)` — are also new references every render. Any child component receiving these as props will re-render even when nothing has changed.
|
||||
|
||||
**Goal**
|
||||
Wrap `withRefresh` in `useCallback` with `[refresh]` as dependency, or inline `useCallback` directly for each operation:
|
||||
```ts
|
||||
const startJail = useCallback(async (name: string) => {
|
||||
await apiStartJail(name);
|
||||
refresh();
|
||||
}, [refresh]);
|
||||
```
|
||||
This ensures the function references are stable between renders.
|
||||
|
||||
**Possible traps and issues**
|
||||
- If `withRefresh` is used to produce many operations, it may be cleaner to keep `withRefresh` as a `useCallback` that captures `refresh`, rather than wrapping each call individually.
|
||||
- After stabilising these references, `JailOverviewSection` or any child wrapped in `React.memo` will correctly skip re-renders when only unrelated state changes.
|
||||
|
||||
**Docs changes needed**
|
||||
None required.
|
||||
|
||||
**Why this is needed**
|
||||
Unstable function references passed as props defeat `React.memo` optimisations and cause unnecessary child re-renders. On the Jails page, which renders a list of potentially many jails, this compounds with every parent state change.
|
||||
|
||||
---
|
||||
|
||||
### TASK-STATE-03 — `DashboardFilterBar` Has Dual State Source
|
||||
|
||||
**Where found**
|
||||
|
||||
Reference in New Issue
Block a user