Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

146
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda