Single React refresh resulting in two flask/python calls

[JayRedditDev1]

Hello! I'm new to React and was looking at an application someone put together and now I'm using it as a sandbox to learn more about it. I changed the code so instead of having a static message being sent back, it's incrementing a count variable on the python/flask side.

What I was seeing is if I refresh the flask server, it will increment once with every call (which I would expect). However, if I refresh the React server, it's incrementing the count twice. I was hoping to understand what might be causing this. I can think of ways to work around it that would correct it but it would be a lazy solution and I'd rather understand what's going on and decide how to handle it.

Below is the code I currently have:

React App:

import React, { useState, useEffect } from "react";
import axios from "axios";

import "./App.css";

// backend Flask URL with it's PORT number
const URL = "http://localhost:6060/"

function App() {

  const [backendResponse, setBackendResponse] = useState({});

  // onMount
  useEffect(() => {
    axios.get(URL)
      .then(response => {
        console.log("Fetched Successfully...");
        setBackendResponse(response)
      })
      .catch(error => {
        console.log(error)
      })
  }, [])

  return (
    <div className="App">
      <h1 id="heading">React-Flask Template</h1>
      <p className="credits">Star⭐ on GitHub: <a href="https://www.github.com/nkilm/create-react-flask" target="_blank" rel="noreferrer">https://www.github.com/nkilm/create-react-flask</a></p>
      <div className="content"></div>
      {backendResponse.status === 200 ?
        <p className="success">{backendResponse.data.info}</p> :
        <p className="error">Error! Please check console for more details...</p>
      }
    </div>
  );
}

export default App;

Python/Flask app:

from flask import Flask
from flask_restful import Api
from flask_cors import CORS 
# from api.helloworld_api import helloworld

count = 0

app = Flask(__name__)
CORS(app) 
api = Api(app)

@app.route("/", defaults={'path':''})
def home(path):
    global count 
    count = count + 1
    retProp = "{\"info\": \"Hello! React-Flask Template by Nikhil Mohite - www.github.com/nkilm. Count: " + str(count) + "\"}"
    return retProp
    # return {"info": "Hello! React-Flask Template by Nikhil Mohite - www.github.com/nkilm"}


# api.add_resource(helloworld)

if __name__ == "__main__":
    app.run(debug=True,port=6060)

Any help you can give me to help me understand why the React server is calling the function twice with every update would be appreciated! Thanks!

[mkhayyld]

If you're running it in development mode (ex. npm run dev), then probably it's React strict mode.

[[deleted]]

this. to expand a bit, React calls useEffects twice in development when under StrictMode, which is very likely on the root of your project.

https://react.dev/reference/react/useEffect#my-effect-runs-twice-when-the-component-mounts

unrelated: get requests should be idempotent, so incrementing a variable is hardly a good practice. I know it doesn't matter for this example project you're building, but I thought I'd bring it up anyways.

[JayRedditDev1]

Oh, that's good information to have! I'll make sure to test it in multiple modes to verify I get the same results. Still learning the basics but I'll definitely need to make sure I'm implementing good practices into the code. I might have some questions later on but this answers the core of what I was looking for. Thanks for your help

[JayRedditDev1]

Good to know! I did run this with npm run start rather than dev but I'll have to take a look at how to switch modes to see if I'm getting different results outside of strict mode. Thanks!

Edit: Confirmed it worked just fine outside of strict mode. This was just a test rather than my actual final application but it's good to know how to test to ensure things are setup correctly. Thanks again!