I am trying to create a React hook that will detect if the user has just refreshed the page. The hook should return true only on the first interaction after the page refresh. On subsequent mounts or interactions, it should return false as long as the user does not refresh the page again.
I tried using the performance.getEntriesByType('navigation') method to detect if the page was reloaded and then clearing the performance entries using performance.clearResourceTimings(). However, this approach did not work as expected. The hook still returns true on subsequent mounts, which is not the desired behavior.
I need a workaround or a different approach to ensure that the hook returns true only once after a page refresh and false on all subsequent mounts until the next page refresh.
import {useEffect} from 'react';
import {Platform} from 'react-native';
type UseDetectPageRefreshProps = {
wasPageRefreshed: boolean;
};
function useDetectPageRefresh(): UseDetectPageRefreshProps {
if (Platform.OS !== 'web') {
return {wasPageRefreshed: false};
}
const isRefreshed = performance
.getEntriesByType('navigation')
.map((nav) => (nav as PerformanceNavigationTiming).type)
.includes('reload');
console.log('Page refresh detected:', isRefreshed);
useEffect(() => {
const resetRefreshStatus = () => {
console.log('Resetting refresh status');
// TODO: Clear performance entries navigation type to avoid false positives on future checks
};
if (isRefreshed) {
resetRefreshStatus();
}
}, [isRefreshed]);
return {wasPageRefreshed: isRefreshed};
}
export default useDetectPageRefresh;
I am looking for a solution that ensures the hook returns true only once immediately after a page refresh and false on all subsequent mounts or interactions until the next page refresh. Any help or guidance on how to achieve this would be greatly appreciated. Thank you!
It seems like keeping track of the number of refreshes would be helpful here. The window’s localStorage property allows you to access a Storage object and the stored data is saved across browser sessions.
if (isRefreshed) {
localStorage.setItem(
'refreshCount',
Number(localStorage.refreshCount || 0) + 1
);
}
return { wasPageRefreshed: Number(localStorage.refreshCount) === 1 };
Alternatively, you can store a boolean value in the localStorage that determines if the first refresh already happened.
Sid Patel is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.