perf: optimize menu and navigation response time

- Add React.memo + useMemo/useCallback to EPD sidebar, header, and tabs
- Prevent unnecessary re-renders on pathname changes
- Fix context reset causing UI flashing during navigation
- Target: <250ms menu response (was ~260ms)

Files: epd-sidebar, epd-header, patient-context, intake-tabs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
colinislit
2025-11-25 14:05:58 +01:00
parent 7033329e0f
commit f7e33d0335
4 changed files with 245 additions and 163 deletions

View File

@@ -29,10 +29,15 @@ export function PatientProvider({ children }: { children: React.ReactNode }) {
// Hook to inject patient data into context from nested layouts
export function useSetPatient(patient: FHIRPatient | null) {
const { setPatient } = usePatientContext();
const { patient: currentPatient, setPatient } = usePatientContext();
useEffect(() => {
setPatient(patient);
return () => setPatient(null); // Cleanup when unmounting
}, [patient, setPatient]);
// Only update if patient ID changed - prevents flashing during navigation
if (patient?.id !== currentPatient?.id) {
setPatient(patient);
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- Intentionally only depend on ID, not full object
}, [patient?.id, currentPatient?.id, setPatient]);
// No cleanup - keep patient in context during navigation to prevent flashing
}