useRevalidator

概要

リファレンスドキュメント ↗

Window focus や一定間隔でのポーリングなど、通常のデータ変更以外の理由で、ページ上のデータを再検証します。

ページデータは、アクションの後に自動的に再検証されることに注意してください。ユーザーインタラクションに応じたデータの通常のCRUD操作のためにこれを使用している場合は、useFetcherFormuseSubmitなどの他のAPIを十分に活用できていない可能性があります。これらのAPIは自動的にこれを行います。

import { useRevalidator } from "react-router";
 
function WindowFocusRevalidator() {
  const revalidator = useRevalidator();
 
  useFakeWindowFocus(() => {
    revalidator.revalidate();
  });
 
  return (
    <div hidden={revalidator.state === "idle"}>
      Revalidating...
    </div>
  );
}

シグネチャ

function useRevalidator(): {
  revalidate: () => Promise<void>;
  state: DataRouter["state"]["revalidation"];
}

戻り値

revalidate 関数と現在の再検証 state を含むオブジェクト。