React: Déclencher le suspense à partir des crochets

Vous souhaitez demander une fonctionnalité ou signaler un bug ?

Question. Cela peut également être lié à #14563.

Comment déclencher le suspense à partir d'un crochet ?

Pourquoi la question s'est-elle posée ?

Cette question s'est posée lors de notre utilisation de react-i18next . Une mise à jour récente de react-i18next fourni le useTranslation -hook qui permet d'obtenir les traductions actuelles et déclenchera également le chargement des espaces de noms de traduction non encore chargés (un peu comme le fractionnement de code).

Pour gérer le cas où les traductions ne sont pas encore chargées, le useTranslation -hook promet de déclencher Suspense , ce qui est en fait très pratique car il s'intègre parfaitement aux fonctionnalités de réaction existantes !

Cependant, si vous utilisez plus de hooks après avoir appelé le useTranslation -hook, ces autres hooks ne seront pas rendus si useTranslation lance la promesse. Une fois les traductions chargées, le crochet ne lancera plus et réagira vous attribuera un gros avertissement rouge indiquant que le nombre de crochets a changé.

Exemple

const Component = () => {
  const [t] = useTranslation('translationnamespace');
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount(count + 1)}>
      {t('The count is:')} {count}
    </div>
  );
};

Si translationnamespace n'est pas encore chargé, useTranslation sera lancé, ce qui empêchera le rendu de useState . Une fois que translationnamespace est chargé, useTranslation ne sera plus lancé, ce qui provoque le rendu de useState provoquant l'avertissement.

Le cas général

Donc, cette question ne s'applique pas uniquement à react-i18next, mais s'applique à tous les hooks qui souhaitent déclencher du suspense. Comment ferions-nous cela et comment cela s'intégrerait-il aux « règles des crochets » actuelles qui stipulent que les crochets ne doivent pas être rendus conditionnellement ?