Async function takes twice the time if there's components in the screen

I have an async function that calculates the price of a product. If I test it in a blank screen, it takes ~5 seconds. If I use it in the actual screen (that has a lot of components) it takes ~10 seconds.

It's the same code (CTRL C, CTRL V) executing on useEffect.

Should I use another hook?

CodePudding user response：

would share some code snippets, or more details

CodePudding user response：

It's very hard to answer this without seeing your useEffect code and the surrounding context.

Are you measuring the actual function call time? Remember that useEffect is called after the render is complete, and it sounds like you have a fairly complex render on the second screen — it will naturally take longer for the function call to start if rendering is taking longer.

Is it possible the component that includes the useEffect call is being rendered more than once? useEffect is called on each render, so maybe you're seeing the results of more than one render.

Is it possible your useEffect hook is dependent on another property that is changing? In other words:

useEffect(() => {
  // your async function call
});

will only be called once per render, but

useEffect(() => {
  // your async function call
}, [someProperty])

will be called anytime someProperty changes.