Skip to content

Instantly share code, notes, and snippets.

@hrdtbs
Last active October 10, 2023 09:36
Show Gist options
  • Save hrdtbs/1ff0e0ee32ece88116d2b006ea2917be to your computer and use it in GitHub Desktop.
Save hrdtbs/1ff0e0ee32ece88116d2b006ea2917be to your computer and use it in GitHub Desktop.
メモ、なぜ`react-hooks/exhaustive-deps`はただcomponentDidMountのように使いたいだけなのに依存関係を入れてくるのか

なぜreact-hooks/exhaustive-depsはただcomponentDidMountのように使いたいだけなのに依存関係を入れてくるのか

export const Example = ({ loadOnlyOnce }) => {
    useEffect(() => {
      loadOnlyOnce()
    }, [loadOnlyOnce]) // ← WHY?
}

componentDidMount/componentDidUpdateは本来一つのフロー

componentDidMountのようなクラスのライフサイクルメソッドの最大の問題点は、それを独立したメソッドと考える傾向があることですが、実際にはフローの一部です。 componentDidMountの中で何かを参照する場合、本来同様にcomponentDidUpdateの中でそれを処理する必要があります。そうしなければコンポーネントはバグを持つ可能性があります。 これはreact-hooks/exhaustive-depsが修正しようとしているものであり、時間をかけて値を処理するように促しています。

  1. Componentがマウントしたら、propと何かをする

    ロジックを componentDidMount または useEffect のbodyに配置する

  2. Componentが更新されたら (propの値(参照)が変更されたら), 新しいpropと何かをする

    ロジックをcomponentDidUpdateまたはuseEffectのdepsに配置する

react-hooks/exhaustive-depsはこのフローの2をやっていないと注意しています。

実際のところ、useEffect自体がこのフローと発生しうるバグに対して立ち向かうことを強いるように設計されています。

自分が思っているだけでは相手に伝わらない

その処理が確実に一度しか行われないと分かる名前でもない限り、それが本当に一度しか行われないのか、依存関係が本当に不変なのか、他の人がすぐに理解することは出来ません。そして、このルールやReact、javascriptは他人よりもっと分からずやです。

空の配列を提供することは、「自分のしていることはわかっている」と言っているのと変わらないのです。

何より実際に依存関係が決して変わらないのであれば、含めても問題はありません。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment