React Js Check Page is Reloaded or Refresh
React Js Check Page is Reloaded or Refresh:In React, you can check if a page has been reloaded or refreshed by examining the window.performance.navigation.type property. This property returns an integer representing the type of navigation that triggered the page load. A value of 1 indicates a page reload, while 0 signifies a regular page visit or refresh. You can access this information in a React component using JavaScript to detect whether the page has been reloaded and take specific actions or render different content based on this information.
written
reviewed
updated
Thanks for your feedback!
Your contributions will help us to improve service.
How can you use Reactjs to determine whether a web page has been reloaded or refreshed by a user?
This React.js code checks if a page has been reloaded or refreshed. It utilizes the performance.navigation.type
property, which equals 1 when a page is reloaded. Inside the useEffect
hook, it updates the isReloaded
state variable based on this condition. The rendered component displays a message indicating whether the page has been reloaded or not. If isReloaded
is true, it shows "Page has been reloaded," otherwise, it displays "Page is not reloaded." This allows the application to detect and respond to page reload events in a React.js context.
React Js Check Page Is Reloaded Or Refresh
Copied to Clipboard
Output of React Js Check Page Is Reloaded Or Refresh
Before Refresh Page
After Refresh Page
Ad