`useRevalidator`

重新驗證頁面上的資料，原因來自於一般資料變更之外的情況，例如視窗焦點或間隔輪詢。

import { useRevalidator } from "@remix-run/react";

function WindowFocusRevalidator() {
  const revalidator = useRevalidator();

  useFakeWindowFocus(() => {
    revalidator.revalidate();
  });

  return (
    <div hidden={revalidator.state === "idle"}>
      Revalidating...
    </div>
  );
}

當呼叫動作時，Remix 已經會自動重新驗證頁面上的資料。如果您發現自己使用此功能來回應使用者互動，對您的資料執行一般的 CRUD 操作，您可能沒有好好利用其他 API，例如 <Form>、useSubmit 或 useFetcher，它們會自動執行此操作。

屬性

`revalidator.state`

重新驗證的狀態。可以是 "idle" 或 "loading"。

`revalidator.revalidate()`

啟動重新驗證。

function useLivePageData() {
  const revalidator = useRevalidator();
  const interval = useInterval(5000);

  useEffect(() => {
    if (revalidator.state === "idle") {
      revalidator.revalidate();
    }
  }, [interval, revalidator]);
}

注意事項

雖然您可以同時渲染多個 useRevalidator 的實例，但它底層是單例模式。這表示當呼叫一個 revalidator.revalidate() 時，所有實例會一起進入 "loading" 狀態（或者說，它們都會更新以報告單例狀態）。

當因為任何其他原因，重新驗證已經在進行時呼叫 revalidate()，會自動處理競爭條件。

如果在重新驗證進行中發生導航，則會取消重新驗證，並從所有載入器請求下一頁的最新資料。