Redux actions list refreshes after uploading image using multer if image is already present in 'upload' folder

Question

When image is uploaded to the backed using multer, it will generate the image and save it locally to a folder named 'uploads'.

The below shows a list of redux actions that are dispatched. Now the image is newly uploaded, the image is also created and stored in 'uploads' folder. No refresh on the redux action list

The below shows that the list of redux actions is refreshed after I upload the same image that i mentioned above (the image was already present in the 'uploads' folder).

From the frontend code below, I tried console log after

• dispatching addUserInfo reducer
• navigating to User Main Page with react-router-dom
• uploading image with axios.post to the backend

If image is newly uploaded (not present in 'uploads' folder yet), the 3 above will be logged in console. The 3rd (axios.post) will be logged slower as it needs to wait the image to be uploaded to the backend first.

If the image was uploaded before hence present in 'uplaods' folder, only the first 2 will be logged in console. The screen, console and redux action list will refresh before the code reach the 3rd console log (axios.post)

frontend code:

const handleSubmit = async (e) => {
  try {
    e.preventDefault();

    const name = e.target.elements.name.value;
    const imageFile = e.target.elements.imageFile.files[0];
    const imageFileName = e.target.elements.imageFile.files[0].name;
    const timeForCustomId = new Date().getTime().toString();

    dispatch(
      addUserInfo({
        name: name,
        imageName: imageFileName,
        customId: timeForCustomId,
      })
    );
    console.log("after dispatch addUserInfo");

    navigate("/userMainPage");
    console.log("after navigate to userMainPage");

    const formData = new FormData();
    formData.append("name", name);
    formData.append("image", imageFile);
    formData.append("customId", timeForCustomId);

    const res = await axios.post("/api", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
    console.log("after axios post");
  } catch (error) {
    console.log("Submit form fail");
    console.log(error);
  }
};

backend router code:

import express from 'express';
const router = express.Router();
import {
  getUser,
  addUser,
  deleteUser,
  updateUserName,
  updateUserPhoto
} from '../controller/userController.js';

router.route('/').get(getUser).post(addUser);

backend code:

export const addUser = async (req, res, next) => {
  try {
    upload(req, res, async (err) => {
      const newUser = new userModel({
        customId: req.body.customId,
        name: req.body.name,
        imageName: req.file.filename,
        image: {
          data: fs.readFileSync("frontend/public/uploads/" + req.file.filename),
          contentType: "image/png",
        },
      });
      await newUser.save();
      res.send("(addUser) successfully uploaded");
    });
  } catch (error) {
    console.log(error);
    return res.status(500).json({
      success: false,
      error: "Server Error",
    });
  }
};