useSWRとinput type="file"で勝手にネットワークが動く

謎のネットワークアクセスがあると気持ちが悪い現象

useSWRとinput type="file"が組み合わさったときにネットワークアクセスが発生したので、それを防ぎたいと思った。

useSWRは非常に優れたフックです。面倒な再検証やさまざまな挙動に対して細かい設定が可能になります。

// 指定したタイミングでfetcher関数を実行してくれる
const { data: data } = useSWR("hoge", fetcher, {
    // 初期データ
    fallbackData: null,
    // その他さまざまなオプションがある
});

オプションは公式サイトで確認。

このオプションにネットワークアクセスの原因がいました。

revalidateOnFocus = true: ウィンドウがフォーカスされたときに自動的に再検証します

input type="file"はデフォルトではブラウザのモーダルが発生するのですが、その状態は元のウィンドウからフォーカスが外れた状態となります。(Chromeで発生を確認)
それが戻るときに自動的に再検証が発生してしまいます。

自動再検証は便利な機能ですが、仕様に合わないので、GlobalでOFFにしました。

グローバルな設定

<SWRConfig value={{revalidateOnFocus:false}}>
  <Component/>
</SWRConfig>