Invalid Hook Call Warning: Rules of hooks broken when multiples React instances rendered
還沒有人認領這個 Issue。
- 主要語言
- JavaScript
- 星號
- 11.8k
- 分支
- 7.9k
- 平均合併
- 1 天 11 小時
- 30 天內合併 PR
- 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 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
研究方向
從 Invalid Hook Call Warning 頁面開始,並查看連結的 issue #13991,以補充缺少的指引。記錄可嵌入 widget 如何避免多個 React 執行個體之間的衝突,並以回報的錯誤情境作為背景。完成標準是頁面說明診斷及防止此類衝突的實用方法。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- javascript, react
- 領域
- documentation
- Issue 類型
- 文件
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 活躍度
- 停滯
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100