I have a front-end application developed in React, deployed on Azure Static Web App. In one of the environments, the application renders a specific screen correctly when accessed. However, if I refresh the browser (F5), the screen no longer renders (this issue occurs on some screens, but not others), and an error message appears in the browser console:

Error: Minified React error #301; visit https://reactjs.org/docs/error-decoder.html?invariant=301

According to the React documentation (link above), this error means: “Too many re-renders. React limits the number of renders to prevent an infinite loop.”

Oddly, the same code (same branch) deployed on another Static Web App in Azure (different URL) works perfectly fine after refreshing, with no issues whatsoever.

After the F5 refresh, I can only access the screen again after clearing the browser cache. Once the cache is cleared, the screen loads correctly, I can navigate to other routes, return to the same routes, but the issue reappears if I hit F5 again (this issue occurs on some screens, but not others).

Does anyone have any ideas on what might be causing this?

Additional Information:

• Deployment in both environments is done through Azure Pipelines via
  Azure DevOps.
• The same code (same branch) is deployed in two
  different environments (two different URLs), with different behaviors
  after the F5 refresh.
• The Azure Static Web App configurations are
  identical (there’s not much to configure in this Azure service, I’m
  using the basic hosting option for this service).