CODEWITHSUNDEEP
javascriptreactjs
Asking
Asking

Reputation: 4192

Stop requesting when changing the route in ReactJs

I make an request in react js and i get data using useSelector. So in useEffect i show the message from backend after the request.

useEffect(() => {
  if (selector.response ? .message) {
    console.log(selector);
    message.success(selector.response?.message, 2);
    setLoading(false);
  }
  console.log('render');
}, [selector.response]);

The code works fine, but appears an issue when i change the page(route). Clicking on another menu item i go to another page and when i come back, the useEffect is triggered again and user again sees the message from message.success(selector.response?.message, 2);.
Question: How to stop showing the message each time after i come back to my route and to show the message just one time?

Upvotes: 2

Views: 1018

Answers (2)

alaboudi
alaboudi

Reputation: 3423

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

Upvotes: 0

sayalok
sayalok

Reputation: 920

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

Upvotes: 1

Related Questions