Vite Reactjs website app not calling API in production but running fine on localhost

Question

I'm trying to deploy my application on Netlify. The landing page fetches a series of images to create a gallery effect. Login page on localhost It's running fine on my local machine, but after deploying, the API is not being called and the application is in a loading state. Login page on Netlify server. I found in the network tab of the dev tools that the API was being called on localhost localhost network tab And on the development server the API request is not triggered. Deploy the server network tab.

The code for the API call is API call code

I don't know what to do. I'm trying to get the API to work in a production environment.

Answer 1

In your useEffect, you are not calling fetchImage, you are returning it.

Will

useEffect(()=>fetchImage, [])

change into

useEffect(()=>fetchImage(), [])

or directly

useEffect(fetchImage, [])

The reason why it can run in the local environment is a bit interesting. When you return a function in a useEffect hook function, it will be used during the component's destruction phase, which means that the function will be called when React unloads the component. In development mode, React will unmount and remount the component after mounting it, thus calling fetchImage - your destruction function. This doesn't happen in a build environment.