API calls run twice on page load

Answered

Turkish Angora posted this in #help-forum

Open in Discord

Turkish AngoraOP

2024-02-04T09:03:41.000Z

I'm creating a blockchain explorer as a project for my resume. To do this, I'm loading a bunch of APIs.

Whenever I load my page, no matter how I change the UseEffect() function, my API gets fetched twice:

const WalletContent: React.FC<WalletID> = ({ walletName }) => {
  const [holdings, setHoldings] = useState<any[]>([]);

  useEffect(() => {
    const getTransfers = async () => {
      try {
        await Moralis.start({
          apiKey: "lol"
        });

        const response = await Moralis.EvmApi.token.getWalletTokenBalances({
          "chain": "0x1",
          "address": walletName
        });
        setHoldings(response.result);

      } catch (e) {
        console.error(e);
      }
    };

    getTransfers();
  }, []);

I'm slightly new to NextJs, so Id really appreciate if I can get help in ensuring the fetch only happens once.

Answered by @ts-ignore

this is not specific to nextjs but react, useEffect runs twice in strict mode

View full answer

11 Replies

@Turkish Angora I'm creating a blockchain explorer as a project for my resume. To do this, I'm loading a bunch of APIs. Whenever I load my page, no matter how I change the UseEffect() function, my API gets fetched twice: `const WalletContent: React.FC<WalletID> = ({ walletName }) => { const [holdings, setHoldings] = useState<any[]>([]); useEffect(() => { const getTransfers = async () => { try { await Moralis.start({ apiKey: "lol" }); const response = await Moralis.EvmApi.token.getWalletTokenBalances({ "chain": "0x1", "address": walletName }); setHoldings(response.result); } catch (e) { console.error(e); } }; getTransfers(); }, []);` I'm slightly new to NextJs, so Id really appreciate if I can get help in ensuring the fetch only happens once.

2024-02-04T09:21:10.000Z

this is not specific to nextjs but react, useEffect runs twice in strict mode

Answer

Turkish AngoraOP

2024-02-04T09:21:50.000Z

I read the documentation and its recommended to keep strict mode on

Is there a better way to fetch APIs to avoid this?

@Turkish Angora Is there a better way to fetch APIs to avoid this?

2024-02-04T09:23:14.000Z

https://www.30secondsofcode.org/react/s/use-effect-once/

you can either copy the useEffectOnce hook or follow the pattern

Turkish AngoraOP

2024-02-04T09:23:47.000Z

thank you so much bro

Ill take a read now

@Turkish Angora I'm creating a blockchain explorer as a project for my resume. To do this, I'm loading a bunch of APIs. Whenever I load my page, no matter how I change the UseEffect() function, my API gets fetched twice: `const WalletContent: React.FC<WalletID> = ({ walletName }) => { const [holdings, setHoldings] = useState<any[]>([]); useEffect(() => { const getTransfers = async () => { try { await Moralis.start({ apiKey: "lol" }); const response = await Moralis.EvmApi.token.getWalletTokenBalances({ "chain": "0x1", "address": walletName }); setHoldings(response.result); } catch (e) { console.error(e); } }; getTransfers(); }, []);` I'm slightly new to NextJs, so Id really appreciate if I can get help in ensuring the fetch only happens once.

Plott Hound

2024-02-04T11:11:37.000Z

is the api key supposed to be secure? because currently its exposed to the client

Turkish AngoraOP

2024-02-04T18:57:59.000Z

I know, I plan to put it in its own .env file when Im close to deploying

Oriental chestnut gall wasp

2024-02-04T19:37:56.000Z

I know this was answered, but you should not need to be making api calls in a useEffect in nextjs. Are you using the app directory?

@Oriental chestnut gall wasp I know this was answered, but you should not need to be making api calls in a useEffect in nextjs. Are you using the app directory?

DirtyCajunRice | AppDir

2024-02-04T20:58:11.000Z

@Turkish Angora this is true and would address your issue. Hydrate rq with a server query.