Question 408063 in React native Question posted in
The official React Native documentation can be found here.

React native – How to create a React hook to detect page refresh only once and return false on subsequent mounts?

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!

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Could it be that all you need is a variable that is initialized when the application is loaded, and which is changed to another value as soon as its value is used?

    Like this:

    let justRefreshed: boolean = true;

export function hasJustBeenRefreshed(): boolean {
  const result: boolean = justRefreshed;
  justRefreshed = false;
  return result;
}

    Putting this in something like RefreshHelper.ts and importing the function where needed, might just do all you need it to do.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search