how to use async function with custom hooks inside useEffects

Question

i want the get the moralis useTokenPrice to fetch an updated price after every five seconds, but from the rules of hook a react hook cannot be used inside useEffects. how do i go about it.

my code

function SpeedPrice(props) {
  const [price, setPrice] = useState({
    symbol: "",
    token_address: "",
    price: "",
  });
  const MINUTE_MS = 5000;
  const address = props.address;
  const symbol = props.symbol;

  async function GetPrice() {
    const result = await useTokenPrice({ // moralis hook
      chain: "eth",
      address: address,
    });
    const usdPrice = result.data.formattedUsd;
    setPrice({ symbol: symbol, token_address: address, price: usdPrice });
  }

  // GetPrice(); infinite loop

  useEffect(() => {
    const interval = setInterval(() => {
      console.log("call getprice"); 
      // GetPrice() error! React Hooks must be called in a React function component or a custom React Hook function
    }, MINUTE_MS);
    return () => clearInterval(interval);
  }, []);

  return price.price;
}

what i have done

  useEffect(() => {
    const interval = setInterval(() => {
      // moved the function inside useEffects
      async function GetPrice() {
      const result = await useTokenPrice({ // moralis hook
        chain: "eth",
        address: address,
       });
      const usdPrice = result.data.formattedUsd;
      setPrice({ symbol: symbol, token_address: address, price: usdPrice });
      }
      GetPrice();
    }, MINUTE_MS);
    return () => clearInterval(interval);
  }, []);

I haven't used moralis, but looks like you can do const {fetchTokenPrice, data} = useTokenPrice( ...) then use fetchTokenPrice() wherever you want. — Davo
– Davo, Commented Jan 10, 2022 at 21:51
All hooks (including useTokenPrice) should be defined unconditionally at the top level of the react component function (SpeedPrice). — Gavin Haynes
– Gavin Haynes, Commented Jan 10, 2022 at 22:03
Also, GetPrice should be wrapped in a useCallback and should be in the dependency list for useEffect — Gavin Haynes
– Gavin Haynes, Commented Jan 10, 2022 at 22:04

maksimr · Accepted Answer · 2022-01-10 22:05:23Z

1

You can use hooks only in top level. But in your case useTokenPrice return fetch function which you can use everywhere:

  const {fetchTokenPrice/*👈*/, data /*👈*/} = useTokenPrice({
    chain: 'eth',
    address: address
  });

  useEffect(() => {
    const interval = setInterval(async () => {
      console.log('call getprice');
      await fetchTokenPrice(address); // 👈
    }, MINUTE_MS);
    return () => clearInterval(interval);
  }, []);

  const usdPrice = data.formattedUsd; // 👈
  return data.isLoading || data.isFetching ? 'Loading...' : usdPrice;

answered Jan 10, 2022 at 22:05

maksimr

5,5214 gold badges26 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

peso Over a year ago

This solves it. Thanks @maksimr

Collectives™ on Stack Overflow

how to use async function with custom hooks inside useEffects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related