UsageCopy Anchor Link

useReleaseStatus allows you to detect whether a new release is available and decide how your app should respond.

Basic exampleCopy Anchor Link

import { useReleaseStatus } from '@piplup/cache-buster';

function App() {
  const status = useReleaseStatus({
    storageKey: 'RELEASE',
  });

  if (status === 'new-release') {
    return (
      <div>
        <p>New version available</p>
        <button onClick={() => window.location.reload()}>
          Refresh
        </button>
      </div>
    );
  }

  return <YourApp />;
}

PropsCopy Anchor Link

Return valueCopy Anchor Link

The useReleaseStatus hook returns one of the following statuses: error, new-release, no-release or null.

• null while the check is in progress, during server rendering, and when enabled is false.
• new-release when the release ID differs from the one saved under storageKey. On a first visit nothing is saved yet, so the result is no-release.
• error when the request fails, returns a non-2xx status, or returns HTML instead of a release ID.

Unlike CacheBuster, the hook never reloads the page. The new ID is saved as soon as it is detected, so after a reload the status is no-release. The check runs once per page load for each storageKey, so several components can call the hook and see the same result.

If the release file is not at /RELEASE on the site root, pass its location as url. See Serving from a sub-path.