reactjs / reactjs/react.dev

Invalid Hook Call Warning: Rules of hooks broken when multiples React instances rendered

Ouverte
#3,630 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
JavaScript
Étoiles
11.8k
Forks
7.9k
Merge moyen
1 j 11 h
PR mergées (30 j)
11

Description

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?

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la page « Invalid Hook Call Warning » et examinez l’issue #13991 liée pour trouver les indications manquantes. Documentez comment les widgets intégrables peuvent éviter les conflits entre plusieurs instances de React, en utilisant le scénario d’erreur signalé comme contexte. La tâche sera terminée lorsque la page expliquera des moyens pratiques de diagnostiquer et de prévenir cette collision.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, react
Domaine
documentation
Type d'issue
Documentation
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.