React: Avertissement lorsqu'un composant mémorisé utilise à la fois des hooks et des suspens

Créé le 7 févr. 2019 · 4Commentaires · Source: facebook/react

Voulez-vous demander une fonctionnalité ou signaler un bogue ?

Punaise

Quel est le comportement actuel?

Un avertissement s'affiche dans la console pour un composant dont toutes les conditions suivantes sont remplies:

il est mémorisé en utilisant React.memo
il utilise des crochets
il utilise le suspense (il y a une promesse lancée).

Texte de cet avertissement: Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

Si le comportement actuel est un bogue, veuillez fournir les étapes pour reproduire et si possible une démo minimale du problème. Collez le lien vers votre exemple JSFiddle (https://jsfiddle.net/Luktwrdm/) ou CodeSandbox (https://codesandbox.io/s/new) ci-dessous:

https://codesandbox.io/s/71lr16j491

Quel est le comportement attendu?

Aucun avertissement ne doit être affiché car les règles des crochets sont respectées. De plus, le comportement doit être cohérent, peu importe si React.memo est utilisé ou non.

Quelles versions de React et quel navigateur / système d'exploitation sont concernés par ce problème?

Réagir 16.8.1

Hooks Bug

Source

trojanowski

👍3

Commentaire le plus utile

Corrigé dans 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl

gaearon le 14 févr. 2019

👍2

Tous les 4 commentaires

Ma première lecture est qu'il s'agit d'un bug.

gaearon le 8 févr. 2019

J'ai remarqué ce même problème dans la version 16.8.1 . Cependant, dans mon cas, il n'y a pas de composant mémorisé entre l'endroit où un Promise est lancé et le composant Suspense .

Le composant déclare deux hooks en haut, avant que le Promise soit lancé et que l'avertissement n'apparaisse. J'ai déplacé l'appel en jetant le Promise par-dessus, avant les crochets et la même chose se produit. L'avertissement disparaît s'il n'y a pas de Promise jeté dans le composant.

Une maquette de mon composant est quelque chose comme:

function Component(props) {
  const [state, setState] = useState()
  useEffect(...)

  // Promise is thrown somewhere after these two
  // hooks on top, but before the return statement.
  return (
    ...
  )
}