Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

145
Views
Does useCallback accept an object from props in react?

i have a reusable component which receives an object prop in react, in this reusable component i have a useCallback, but i am not sure if it's correct since it's an object, and since there's referential equality thing I am confused.

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]);

This actually works but i am just not sure if this is correct way or maybe i should deconstruct on top of component:

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

and on useCallback pass them and refer to them and not the object prop?

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

Pls help me improve my code

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I suggest you move out each callback function outside of your onPress function and wrap them with useCallback.

Something like below:

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 handleIsCredit = useCallback(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)
    }
  },[contact])

  const handleIsNotSukiCustomer = useCallback(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,
    })
  },[isCreditFlow, contact])

  const onPress = useCallback(() => {
    if (!isSukiCustomer) {
      handleIsNotSukiCustomer()
    } else if (isCredit) {
      handleIsCredit()
    }
  }, [isCredit, isSukiCustomer, handleIsNotSukiCustomer, handleIsCredit])
}

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!