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!