React: Reload page only once if variable changes

Question

I have a variable isVisible that holds a boolean value. When this variable changes, I need to make a reload of the component, but only one time. And if the variable changes again at some point, then run this reload again for one time, but not continuously. Currently, I have this code that runs continuously:

useEffect(() => {
    if (isVisible) {
        window.location.reload();
    }
}, [ isVisible ]);

How is this possible to achieve? Can someone tell me why this component is reloading continuously, even when I add the variable in dependency array?

You are reloading the entire page, unless you use some form of local storage to prevent it, that variable will change (when it's initialised) every time the page loads, triggering the effect (and reloading the page, etc) Why do you need to reload the page? — DBS
– DBS, Commented Jan 18, 2022 at 14:04

Sojin Antony · Accepted Answer · 2022-01-18 14:09:03Z

2

Note: Reloading the entire website to reload a component is a not good method in react. if only need to reload a component you could try changing its key from the parent component.

For this particular case (If you really need to do reloading try this)

create state to check whether its first load or not

const [isFirstLoad, setIsFirstLoad] = useState(true)
const [isVisible, setVisible] = useState(false)
useEffect(() => {
    if (!isFirstLoad) {
        window.location.reload();
    } else {
        setIsFirstLoad(false)
    }
}, [ isVisible ]);

answered Jan 18, 2022 at 14:09

Sojin Antony

2,2521 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: Reload page only once if variable changes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related