API call happening twice, but called once!

[tanno1]

Describe the issue

I am designing an app, and after someone fills out a form, an openAi assistant is retrieved (this works), and then the page is redirected to another page at which point I have this:

useEffect(() => { 
    const SendReqToBackend = async () => {
      try {
        // make new thread
        const threadResult = await axios.post('/api/create-thread')
        setThreadId(threadResult.id)

        // add thread id to requestData Object
        const requestDataWithID = {
          ...requestData,
          ThreadID: threadResultd.id
        }

        const FirstMessage = await axios.post('/api/create-message', requestDataWithID)
        const FirstRun = await axios.post('/api/run-thread', requestDataWithID)
      } catch (error) {
        console.error('Error sending data to backend: ', error);
      }
    }
    SendReqToBackend(); // send request once when component mounts
  }, []) // run once.

The issue is that it will make two requests to '/api/create-thread'. I disabled CORS as I read online that it could be a preflight issue, but it is still happening and I cannot figure out why. I am not sure if it will be a huge error in the app as this is the first thing I have designed, but I would rather it just be one, because everytime I use the app, the first create-thread request works, and the second gives me an error

10:30:40 AM [vite] http proxy error: /api/create-thread AggregateError at internalConnectMultiple (node:net:1114:18) at internalConnectMultiple (node:net:1177:5) at internalConnectMultiple (node:net:1177:5) at defaultTriggerAsyncIdScope (node:internal/async_hooks:464:18) at GetAddrInfoReqWrap.emitLookup [as callback] (node:net:1510:7) at GetAddrInfoReqWrap.onlookupall [as oncomplete] (node:dns:130:8)

Any suggestions?

IMAGES:

Example Code

No response

Expected behavior

No response

Axios Version

No response

Adapter Version

No response

Browser

No response

Browser Version

No response

Node.js Version

No response

OS

No response

Additional Library Versions

No response

Additional context/Screenshots

No response

[tanno1]

lmk if i need to provide more information!

[DigitalBrainJS]

but called once!

I have my doubts about this. Looks like this is a typical React issue, not an Axios issue.
#6139
https://stackoverflow.com/questions/60618844/react-hooks-useeffect-is-called-twice-even-if-an-empty-array-is-used-as-an-ar

[tanno1]

Thanks @DigitalBrainJS. That was a great response, turned out I was using useEffect incorrectly. Appreciate the help!