React: フックからサスペンドをトリガーします

機能をリクエストしバグを報告しますか？

質問。 これは #14563 にも関連している可能性があります。

フックからサスペンドをトリガーするにはどうすればよいですか？

なぜ質問が出たのですか？

この質問は、 react-i18next使用中に出てきました。 react-i18nextの最近の更新により、 useTranslationフックが提供されました。これにより、現在の翻訳を取得でき、まだロードされていない翻訳名前空間のロードもトリガーされます（コード分割のようなもの）。

翻訳がまだロードされていない場合を処理するために、 useTranslationフックはSuspenseをトリガーする約束をスローします。これは、既存の反応機能と完全に統合されているため、実際には非常に優れています。

ただし、 useTranslationフックを呼び出した後にさらにフックを使用している場合、 useTranslationがpromiseをスローすると、これらの他のフックはレンダリングされません。 翻訳が読み込まれると、フックはそれ以上スローされなくなり、フックの量が変更されたことを示す大きな赤い警告が表示されます。

例

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

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

translationnamespaceがまだロードされていない場合、 useTranslationがスローされ、 useStateがレンダリングされません。 translationnamespaceがロードされると、 useTranslationはスローされなくなり、 useStateがレンダリングされ、警告が発生します。

一般的なケース

したがって、この質問はreact-i18nextにのみ適用されるのではなく、サスペンスをトリガーしたいすべてのフックに適用されます。 これをどのように行うのでしょうか。また、フックを条件付きでレンダリングしてはならないという現在の「フックのルール」とどのように統合するのでしょうか。