# usePageRestore

Calls `callback` when the browser restores the page from its back/forward cache, e.g. the user comes back with the Back button. The page reappears exactly as it was left: no reload, no new render, no effects re-run, so data shown on it may be stale.

Always calls the latest `callback`. Nothing runs on the server or on a normal page load.

## Import

```ts
import { usePageRestore } from '@vincent.ri/react-tils'
// or only this hook
import { usePageRestore } from '@vincent.ri/react-tils/usePageRestore'
```

## Usage

```ts
const { data, refetch } = useCart() // your data-fetching hook
usePageRestore(() => refetch())

// Reset a form that was left mid-submit before navigating away.
usePageRestore(() => setSubmitting(false))
```

## When to use it

Refreshing a cart, notifications, prices, or anything else that may have changed while the user was on another page, or resetting UI such as an open menu or a "Submitting…" button left over from before.

## When not to

You want to know when the tab becomes visible again; use `useDocumentVisibility`. Avoid `unload` listeners anywhere on the page: they stop browsers from caching it at all.

## API

```ts
function usePageRestore(callback: (event: PageTransitionEvent) => void): void
```

| Parameter | Description |
| --- | --- |
| `callback` | Called with the `pageshow` event. Can change every render. |

## Browser support

Works in all modern browsers.

## Coming from another library?

Other libraries call this `useBfcache`, `usePageShow`.

---

150 B minified and brotlied
Source: https://github.com/vincentri/react-tils/blob/main/src/usePageRestore.ts
Docs page: https://vincentri.github.io/react-tils/hooks/usePageRestore/
Previous: [useNow](https://vincentri.github.io/react-tils/hooks/useNow.md)
Next: [useDeviceOrientation](https://vincentri.github.io/react-tils/hooks/useDeviceOrientation.md)