Stop requesting when changing the route in ReactJs

You have to use User Effects with Cleanup

You need to clean up the effects from the previous render or actions. Otherwise it will hold the previous state

You will find more details in official tutorial

userEffect Cleanup Process

Update Answer

import React, {useState, useEffect} from "react";
export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    function handleChange(val) {
      setCount(val)
    }
    window.addEventListener('load', handleChange(1))

    return () =>{
      handleChange(0);
      console.log(count)
    };
  })

  return (
    <div className="App">
      {count}
    </div>
  );
}

Here I take a count variable and setCount methods to set the count variable

Inside useEffect I create a function which will be responsible for setting up count value

Then I create an addEventListner when the page will load it will set the count value to 1

Then I call an anonymous function for clean up things which will remove the previously set value to 0

After that I set a console to just check if its sets the value

So when user come back to your page again initially it will find the default value then set the dynamic value.

You can make it more efficient way. I just give you an example

Below I share a link which will help you to handle api response

How to call api and cleanup response using react usereffect hooks

It seems like in your case your component unmounts upon page change and remounts when the user comes back. When the componet remounts, the useEffect always fires. That's simply how it works.

Answering your question, this is a simple thing you can do for your case.

// this will create a function that will return true only once
const createShouldShowSuccessMessage = () => {
  let hasShownMessage = false;
  ()=> {
    if(hasShownMessage) {
     return false;
    } else {
     hasShownMessage = true;
     return true;
    }
  }
};

const shouldShowSuccessMessage = createShouldShowSuccessMessage();

const SomeComponent = () => {
  useEffect(() => {
    if(shouldShowSuccessMessage()) {
     message.success(selector.response?.message, 2);
    }
    setLoading(false);
  }, [selector.response]);
}

I would advise you got with a better setup that performing your side effects inside your components but I hope my answer helps you till you get there