React: Desperte o suspense dos ganchos

Você quer solicitar um recurso ou relatar um bug ?

Pergunta. Isso também pode estar relacionado a # 14563.

Como desencadeamos suspense a partir de um gancho?

Por que surgiu a pergunta?

Esta pergunta surgiu durante nosso uso de react-i18next . Uma atualização recente de react-i18next forneceu o useTranslation -hook que permite obter as traduções atuais e também acionará o carregamento de namespaces de tradução ainda não carregados (como a divisão de código).

Para lidar com o caso em que as traduções ainda não foram carregadas, o useTranslation -hook lança uma promessa de acionar Suspense , o que é realmente muito bom porque se integra perfeitamente aos recursos de reação existentes!

No entanto, se você estiver usando mais ganchos depois de chamar o useTranslation -hook, esses outros ganchos não serão renderizados se useTranslation lançar a promessa. Assim que as traduções forem carregadas, o anzol não lançará mais e reagirá o premiará com um grande aviso vermelho de que a quantidade de ganchos mudou.

Exemplo

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

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

Se translationnamespace ainda não foi carregado, useTranslation irá lançar, fazendo com que useState não seja renderizado. Assim que translationnamespace for carregado, useTranslation não lançará mais, o que faz com que useState seja renderizado causando o aviso.

O Caso Geral

Portanto, esta questão não se aplica apenas ao react-i18next, mas se aplica a todos os ganchos que desejam desencadear o suspense. Como faríamos para fazer isso e como isso se integraria com as atuais "Regras dos Ganchos", que afirmam que os ganchos não devem ser renderizados condicionalmente?