UseEffect with Async function

Viewed 93

I'm having a problem with my get request function using Axios. whenever its got called, the get function always runs twice. I don't know what the problem is here. I have tried removing React.Strictmode tag but nothing changed. I started to think the webpack dev server is the problem here. Here is my code :

  1. my get Request function :
export default async function useSendResquest(url, handler) {
  var Response;
  Response = await axios.get(url).then((response) => {
    return response.data;
  });
  return handler(Response);
}
  1. My UseEffect Call :
useEffect(() => {
  useSendResquest(
    "http://localhost:8080/api/control?name=rgbLed&status",
    (Response) => {
      setLightState(Response);
    }
  );
  console.log("hi");
}, []);
  1. Network activity :

enter image description here

  1. My Console Log : enter image description here

does anyone have any clue?

Thank you all

1 Answers

I found the problem with why my app kept rerendering.it is because of my index.html template. The webpack compiler tried to add <script defer src="bundle.js"></script> twice, at the top of the HTML and at the bottom of it tool. After fixing this problem in the webpack config, everything ran as it should.

Related