0

I am fetching data from the api using a createAsyncThunk action function. I created a custom hook to call this dispath function everytime:

export default function useFetchTransactionHistory() {
    const dispatch = useDispatch<AppDispatch>();
    return new Promise(async (resolve, reject)=> {
      try {
        const res:any = await dispatch(fetchTransactionsHistory());
        if(res.code === 200) return(res.data);
      }
      catch (error) {
         console.log(error);
      }
  })
}

The issue i'm facing is that it runs twice when I import it to use in my component

export default function TransactionHistory = ()=> {
  const { data, isLoading } = useFetchTransactionHistory(); 

  return(
    <div>{data}</div>
  );
}
Keenlabi
  • 163
  • 1
  • 2
  • 11

1 Answers1

1

TransactionHistory component itself might be getting called twice. Can you reverify Parent Component of TransactionHistory again?

Teja Kadali
  • 56
  • 4
  • I have tried everything, it still get's called twice. The only time it worked as expected (by a single call) is when I disabled strict mode in the app root level. I don't want to disable strict mode, I assume there is a better implementation. – Keenlabi Oct 05 '22 at 22:20
  • https://stackoverflow.com/questions/54892403/usereducer-action-dispatched-twice Looks like there is no other solution other than disabling Strict mode. Its not a issue as in prod build strict mode is disbled by default. – Teja Kadali Oct 05 '22 at 22:30
  • Yes, after all my research, that is the conclusion I have also come to. I might implement a state check before the trigger of each api calls to prevent double calls to the api. – Keenlabi Oct 06 '22 at 13:51