![useeffect.png](https://blog.radicalloop.com/uploads/useeffect_cc164d08c5.png)

While working on the recent project, We found that `useEffect` runs twice and API calling twice in useEffect. That's a weird and surprising issue. 

After a couple of hours spent on that issue, we found that It is default behaviour of the react `<React.StrictMode />`.

They keep intentionally to handle additional behavior to ensure it's compatible with reusable state and it is dev-only behaviour. 
They want to add multiple new features so, the React community decided to add double-rendering in dev-only mode. 

If double invoking effects cause significant problems for your app, you can remove `<StrictMode>` from react app.

## Solution

You can use [React Query](https://react-query.tanstack.com/). React Qurey caches the result and doesn't call the api twice. 


### Here are some links related to this discussion.


https://github.com/reactwg/react-18/discussions/19

https://github.com/facebook/react/issues/24502

...

If you enjoyed reading this blog post, please click on the clap button below! ❤️?

Follow ****RadicalLoop**** on [Twitter](https://twitter.com/radicalloop). ?

large_useeffect.png

useEffect runs twice in React 18

Radicalloop