Files
triqura-ecd/app/epd/components/patient-context.tsx
colinislit f7e33d0335 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>
2025-11-25 14:05:58 +01:00

44 lines
1.3 KiB
TypeScript

'use client';
import { createContext, useContext, useState, useEffect } from 'react';
import type { FHIRPatient } from '@/lib/fhir';
interface PatientContextValue {
patient: FHIRPatient | null;
setPatient: (patient: FHIRPatient | null) => void;
}
const PatientContext = createContext<PatientContextValue>({
patient: null,
setPatient: () => {},
});
export function usePatientContext() {
return useContext(PatientContext);
}
export function PatientProvider({ children }: { children: React.ReactNode }) {
const [patient, setPatient] = useState<FHIRPatient | null>(null);
return (
<PatientContext.Provider value={{ patient, setPatient }}>
{children}
</PatientContext.Provider>
);
}
// Hook to inject patient data into context from nested layouts
export function useSetPatient(patient: FHIRPatient | null) {
const { patient: currentPatient, setPatient } = usePatientContext();
useEffect(() => {
// 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
}