react js : detect page refresh

Question

I am new to react.js. I have a simple page with table. When I reload the page, state is getting lost. Is there a way to detect the browser refresh ?

Solution

The event beforeunload is executed just before window browser is being refreshed. Event is cancellable.

window.beforeunload = (e) => {
  console.log('Stop this');
  e.preventDefault()
  e.returnValue = '';
};

When using React an option is to take control in your Application component, or your most higher order component, in the componentDidMount lifecycle method as @georgim suggested instead componentWillUnmount as I first suggested, and manage there what you want to achieve.

Comments

[Kokodoko]

Single page apps shouldn’t reload the whole page, just if you don’t want to hard-resets your state.

[learning_vba]

its not a single page app.

[Hamza Baig]

@learning_vba You don't need renderTable(); in your MainHandler.js Because that'll be handled by Dashboard.js independently.

[learning_vba]

thing is I dont want to change the existing logic. Is there anyway to detect browser refresh?

[Giorgi Moniava]

what do you think about componentDidMount in the top level component? (to detect reload)

[Dez]

@giorgim I have been trying it and besides it is better to use the beforeunload event listener, indeed it is more reliable to apply the logic in componentDidMount.

[Anxifer]

this API is deprecated