Invalid Hook Call Warning: Rules of hooks broken when multiples React instances rendered
まだ誰も着手していません。
- 主要言語
- JavaScript
- スター
- 11.8k
- フォーク
- 7.9k
- 平均マージ
- 1日 11時間
- マージ済み PR(30日)
- 11
説明
At the very bottom of "Invalid Hook Call Warning" page (https://reactjs.org/warnings/invalid-hook-call-warning.html) it says the following:
Note
In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if require('react') resolves differently between the component and the react-dom copy it was rendered with.
However it has no explanation on how to ensure there is no collision between multiple React instances.
I am building an embeddable React widgets and very recently I matched the following error:
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.xo (embed.js:formatted:4213)
at exports.useMemo (embed.js:formatted:487)
at StarRating (ComponentName.88cd42c6.js:8)
at _o (embed.js:12)
at hi (embed.js:12)
at Gi (embed.js:12)
at Yi (embed.js:12)
at Ki (embed.js:12)
at Vi (embed.js:12)
at embed.js:12
Which decodes to the following error message:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
After some analysis, 1) is not true, both react and react-dom are matching, 2) rules of hooks are not broken (useMemo() at the very top of functional component), 3) most likely related to it.
The third point I can't control, because website can have various React widgets on the same page which developed by other companies.
I check the following thread but it didn't help me. And it seems to be an issue for some users as well.
What to do in this case?
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
「Invalid Hook Call Warning」ページから始め、記載が不足している点を確認するため、リンクされている issue #13991 を確認してください。報告されたエラーシナリオを背景として、埋め込み可能なウィジェットが複数の React インスタンス間の競合を回避する方法を文書化してください。ページでこの衝突を診断および防止する実践的な方法が説明されていれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react
- 領域
- documentation
- issue の種類
- ドキュメント
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100