diff --git a/src/screens/PasswordScreen.tsx b/src/screens/PasswordScreen.tsx index c5338f1..346b411 100644 --- a/src/screens/PasswordScreen.tsx +++ b/src/screens/PasswordScreen.tsx @@ -101,7 +101,7 @@ function PinOverlay({ onUnlock, onCancel, title }: { onUnlock: (pin: string) => } // ─── Password Row ───────────────────────────────────────────────────────────── -function PasswordRowComponent({ item, onEdit, onDelete }: { item: PasswordEntry; onEdit: () => void; onDelete: () => void }) { +function PasswordRowComponent({ item, onEdit, onDelete }: { item: PasswordEntry; onEdit: (item: PasswordEntry) => void; onDelete: (id: string) => void }) { const { colors } = useAppTheme(); const s = useMemo(() => makeRowStyles(colors), [colors]); const [revealed, setRevealed] = useState(false); @@ -120,10 +120,10 @@ function PasswordRowComponent({ item, onEdit, onDelete }: { item: PasswordEntry; {item.notes ? {item.notes} : null} - + onEdit(item)}> - + onDelete(item.id)}> @@ -255,6 +255,11 @@ export default function PasswordScreen() { return setPinMode(null)} />; } + // Performance optimization: stabilize renderItem callback to prevent cascading re-renders of memoized PasswordRow items + const renderItem = useCallback(({ item }: { item: PasswordEntry }) => ( + + ), [openEdit, deleteEntry]); + return ( {/* Toolbar */} @@ -284,13 +289,7 @@ export default function PasswordScreen() { item.id} - renderItem={({ item }) => ( - openEdit(item)} - onDelete={() => deleteEntry(item.id)} - /> - )} + renderItem={renderItem} contentContainerStyle={{ padding: 16, paddingBottom: 96 }} ListEmptyComponent={ diff --git a/src/screens/PhonebookScreen.tsx b/src/screens/PhonebookScreen.tsx index 1884348..28c1824 100644 --- a/src/screens/PhonebookScreen.tsx +++ b/src/screens/PhonebookScreen.tsx @@ -380,8 +380,9 @@ export default function PhonebookScreen() { }); }, []); - const openAdd = () => { setEditing(null); setModalVisible(true); }; - const openEdit = (c: Contact) => { setEditing(c); setModalVisible(true); }; + // Performance optimization: stabilize callbacks to prevent unnecessary ContactRow re-renders + const openAdd = useCallback(() => { setEditing(null); setModalVisible(true); }, []); + const openEdit = useCallback((c: Contact) => { setEditing(c); setModalVisible(true); }, []); // Filter const filtered = contacts.filter(c => {