SWR の revalidateOnFocus は window.confirm() でも再検証が動く

SWR の revalidateOnFocus オプションが効いた状態で window.confirm() によるダイアログでOK/キャンセルを選択した際にもフォーカスが戻ったとみなされて再検証が動くらしい、というメモ。

再現コードはこんな感じ。confirmを閉じるタイミングで毎回refreshされる。

import useSWR from "swr";

function App() {
  const { data } = useSWR("/hello", async () => {
    return Math.random();
  }, {
    revalidateOnFocus: true,
  });

  return (
    <div>
      <span>{data}</span>
      <button onClick={() => window.confirm("OK?")}>confirm</button>
    </div>
  )
}

export default App

連続してconfirmを押すとrefreshされないことがあるが、多分連続して押したときにブラウザがフォーカスイベントを発生させないのかもしれない。5秒間隔くらいで押すと毎回refreshされる感じ。

なので、window.confirm()しつつその後データ更新を行い、更新後のデータを取得するという場合にはmutate()を使わなくてもリフレッシュされちゃったりする。 （とはいえ mutate() を明示的に呼び出したほうが良いんだけど）