BookmarkButtonがRules of Hooksに違反していてエラーが出る

[dowdiness]

概要

自分の手元の開発環境でBookmarkButtonが含まれているページを開くとエラーが出てBookmarkボタンが表示されませんでした。

Warning: React has detected a change in the order of Hooks called by BookmarkButton. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. useContext                 useContext
3. useRef                     useRef
4. useRef                     useRef
5. useRef                     useRef
6. useRef                     useRef
7. useRef                     useRef
8. useRef                     useRef
9. useMemo                    useMemo
10. useCallback               useCallback
11. useState                  useState
12. useLayoutEffect           useLayoutEffect
13. useEffect                 useEffect
14. useDebugValue             useDebugValue
15. useRef                    useRef
16. useCallback               useCallback
17. useCallback               useCallback
18. useLayoutEffect           useLayoutEffect
19. useLayoutEffect           useLayoutEffect
20. useLayoutEffect           useLayoutEffect
21. useDebugValue             useDebugValue
22. undefined                 useEffect
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at BookmarkButton (http://localhost:3000/packs/js/application-18e7b40….js:2200:29)

実際にBookmarkButtonを確認してみると、Rules of Hooksで定義されているルールの

🔴 Do not call Hooks after a conditional `return` statement.

に違反しているコードがありました。

試しに手元でルールを守ったコードに変えたらエラーが出なくなりました。

ついでにeslint-plugin-react-hooksを使うようにeslintに設定を追加したいです。

https://www.npmjs.com/package/eslint-plugin-react-hooks

再現手順

1. 任意のユーザーでログインする
2. /reports/12168338 にアクセス
3. Bookmarkボタンが表示されない

期待される振る舞い

Rules of Hooksを守る。

スクリーンショット

環境

• OS: [Mac]
• ブラウザ: [chrome]
• バージョン: [122]

[kyokucho1989]

@dowdiness
おはようございます。自分が担当していたIssueですね、、　申し訳ないです。
#5114

上記Issueはまだ本番環境へリリースされていませんが、development環境では問題なく表示されています。

なぜローカルのみでエラーが発生してしまうのかわかりませんが、報告まで。

[komagata]

@kyokucho1989

上記Issueはまだ本番環境へリリースされていませんが、development環境では問題なく表示されています。

なぜローカルのみでエラーが発生してしまうのかわかりませんが、報告まで。

上記は"development環境"と"ローカル"を同じ意味で使っていますでしょうか？
スクリーンショットはstaging環境だったのでちょっと混乱してしまいました。

正しくは、

production環境（本番）、staging環境、development環境（ローカル）、test環境

という感じになると思います。

[kyokucho1989]

@komagata
すみません、言葉を間違えてました。
staging環境の誤りです。

[dowdiness]

@kyokucho1989

すいません言葉不足で書いていませんでしたが、このエラーはmainではない下記のPRのコメントのブランチで起こりました。

#7449

エラーが起こるようになった原因はおそらく追加したコンポーネントで新たにuseSWRを呼び出しているからです。細かくは書きませんがuseSWRはkeyによってアプリ全体でデータ（とキャッシュ）の共有をしています。useSWRの呼ばれる数が増えた影響でhookの呼ばれる順番が変わってしまったのだと思います。

実際にエラーメッセージを見たところ、22番目のhookの前回のレンダーがundefinedなのに次のレンダーではuseEffectになっています。

ちなみにRule of hooksに違反している限りhookの呼び出し順は保証されなくなる危険性があるのでエラーが出る出ないに関わらずに修正はするべきです。

[kyokucho1989]

@dowdiness
なるほど。ありがとうございます。
今後、私は何かやらなくてはいけない作業はありますか？

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions]

このissue|PRはstaleラベルを付けた後7日間更新がないためcloseしました。