tengo un componente reutilizable que recibe un accesorio de objeto en reacción, en este componente reutilizable tengo un useCallback, pero no estoy seguro de si es correcto ya que es un objeto, y como hay igualdad referencial, estoy confundido.

 const SukiCustomer = ({ contact, source, sukiPhoneNumbers, isCreditFlow }) => { const appTheme = useThemeContext(); const navigation = useNavigation(); const isSukiCustomer = sukiPhoneNumbers.includes(contact.phone_number); const isAllCustomers = source === ALL; const isCredit = source === CREDIT; const isPromo = source === PROMO; const dueAmount = contact.totalDebit - contact.totalCredit; const displayDueAmount = getFormattedPesos(dueAmount); const onPress = useCallback(() => { const handleIsCredit = async () => { try { const parameters = { id: contact.id, first_name: contact.first_name, last_name: contact.last_name, phone_number: contact.phone_number, totalCredit: contact.totalCredit, totalDebit: contact.totalDebit, 'Screen Name': 'SukiCustomers', }; await selectSukiContact({ parameters }); await viewSukiTransactionHistory({ parameters }); timeToInteractionUtils.setTTIStartTime({ key: keys.TTI_START_SUKI_TRANSACTION_HISTORY, }); navigation.navigate('TransactionHistory', { contact, fromScreen: leanPlumConstants.screenNames.SukiListaActivity, }); } catch (error) { console.error(FILE_PATH, error); } }; const handleIsNotSukiCustomer = async () => { const parameters = { ...contact, button_name: 'Add', }; await addSukiContact({ parameters }).catch(error => { console.error(FILE_PATH, error); }); timeToInteractionUtils.setTTIStartTime({ key: keys.TTI_START_ADD_CONTACT_ACTIVITY, }); const origin = isCreditFlow ? CREDIT : SUKI; navigation.navigate('AddSukiCustomer', { contact, source: origin, }); }; if (!isSukiCustomer) { handleIsNotSukiCustomer(); } else if (isCredit) { handleIsCredit(); } }, [contact, navigation, isCreditFlow, isCredit, isSukiCustomer]);

Esto realmente funciona, pero no estoy seguro de si esta es la forma correcta o tal vez debería deconstruir sobre el componente:

 const { id, first_name, last_name, phone_number, totalCredit, totalDebit } = contact;

y en useCallback pasarlos y referirse a ellos y no al objeto prop?

 [ id, first_name, last_name, phone_number, totalCredit, totalDebit, active_services, suki_id, id, navigation, isCreditFlow, isCredit, isSukiCustomer, ]);

Por favor ayúdame a mejorar mi código.