Скачать или смотреть Understanding Why Axios Sends Multiple Requests in React's StrictMode

Discover why your `Axios` requests in React may be sent multiple times, especially when using StrictMode in development. Learn how to address this common issue effectively.
---
This video is based on the question https://stackoverflow.com/q/76222328/ asked by the user 'sadasdadssad' ( https://stackoverflow.com/u/21583850/ ) and on the answer https://stackoverflow.com/a/76222799/ provided by the user 'Santhosh Sasidharan' ( https://stackoverflow.com/u/18895200/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Axios sending 2 or more requests

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Why Axios Sends Multiple Requests in React's StrictMode

Have you ever noticed that your Axios requests are being executed multiple times when working on a React application? If so, you're not alone! This is a common confusion among React developers, often emerging when using React's useEffect and particularly when running in StrictMode. Let's delve into why this happens and how to resolve the issue.

The Problem: Multiple Axios Requests

In the provided code snippet, the developer was surprised to see the Axios request being executed twice. Here’s a simplified version of the code:

[[See Video to Reveal this Text or Code Snippet]]

When the Test component mounts, Axios retrieves data from the endpoint "test" and logs it to the console. However, if you check the network tab, you'll find that this request is made twice. This can be confusing, especially if you only expected a single request.

The Explanation: React's StrictMode

The underlying reason for this behavior lies in how React handles component rendering in StrictMode. Here's what happens:

Development Environment: React's StrictMode actively double-invokes components in development mode to help you identify side effects. This means that by wrapping your application in StrictMode, components may execute multiple render cycles to detect potential side effects during rendering.

Use of Axios: Since your Axios request is being initiated inside the useEffect, it's actually getting triggered twice. This is expected behavior when running under StrictMode in development.

Example of Enabling StrictMode

You might encounter this situation if you've enabled StrictMode like this:

[[See Video to Reveal this Text or Code Snippet]]

The Solution: Adjusting Your Code

If you find that the double requests are problematic for your use case, there are a few potential solutions:

Use Multiple Components

If you need to avoid double requests for specific operations, consider moving your Axios calls to higher-level components or separate hooks that won't re-trigger on double rendering.

Handling Data in Effects

You could also structure your useEffect to ensure it only runs once by adding an empty dependency array (an empty []) to your useEffect. This tells React to only run the effect after the initial mount:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

In conclusion, while it might be jarring to see Axios making multiple requests, it’s merely a byproduct of React's helpful development tools, specifically StrictMode. Understanding this feature not only helps clarify what's happening but also aids in writing more robust applications.

Feel free to share your experiences with Axios and React below in the comments!