← docs

Reloading Data

Sometimes you need to re-run the loader imperatively — for example, after a user adds a record to a table. The useReload hook lets you do this from within a page component.

Basic usage

import { getLoaderData, type LoaderData, useReload } from '@hono-preact/iso';

const Movies: FunctionComponent<LoaderData<{ movies: MovieList }>> = ({ loaderData }) => {
  const { reload, reloading } = useReload();

  const handleAdd = async () => {
    await addMovie({ title: 'New Movie' });
    reload();
  };

  return (
    <>
      <button onClick={handleAdd} disabled={reloading}>
        {reloading ? 'Adding...' : 'Add Movie'}
      </button>
      <ul>
        {loaderData?.movies.results.map(m => <li key={m.id}>{m.title}</li>)}
      </ul>
    </>
  );
};

export default getLoaderData(Movies, { serverLoader });

useReload must be called inside a component rendered by getLoaderData. Calling it elsewhere throws an error.

Background refresh

Reload is a background refresh — the current content stays visible while the new data fetches. There is no Suspense fallback shown during reload. Use reloading to reflect the in-progress state in your UI.

Cache invalidation

reload() re-runs the serverLoader. If you're using a cache, invalidate it first so the RPC call fires rather than returning stale cached data:

const { reload } = useReload();

const handleAdd = async () => {
  await addMovie({ title: 'New Movie' });
  cache.invalidate(); // clear the cache entry first
  reload();           // then re-run the loader
};

API

const { reload, reloading } = useReload();