Q. ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合がある

調査ログ#

次のように調査を行った。

• React DevTools で現象を再現しながら Profiling を取った。
  • 特定のコンポーネント以下で再レンダリングが確認できた。
• ネットワークタブと、当該コンポーネントの state や props を調査した。
  • ネットワークタブで同一のリクエストが連続して走っていることなどから、SWR の useSWR を利用したカスタムフックが再レンダリングのトリガーになっていることがわかった。
• カスタムフックが再レンダリングを起こしている原因となっていそうな箇所を調査した。
  • そのコンポーネント内では、カスタムフックの引数に変更は見られなかった。
  • 子要素の useEffect 内で、引数となっている state を更新している箇所が見つかった。
    • 明白なアンチパターン
• useEffect を排除すると、入力要素の内容が吹き飛ぶ頻度が極端に減ったが解決はしなかった。
• 他にコード上は問題となる箇所が見受けられなかった。
• SWR が再レンダリングを抑制していないということは、レスポンスが変化しているのではないか？ということに気づいた。
  • ネットワークタブを見た時点で気づくべきではある。
• レスポンスをいくつか JSON として吐き出し比較すると、レスポンス内の配列の順序が安定していないことが分かった。

結論#

特定の API のレスポンスが安定していないため、SWR が行う自動再検証で異なるレスポンスを返していると判定され、再レンダリングがトリガーされていた。

useEffect を修正して、頻度が減ったのは再検証の頻度が減少したため。