React: Desencadena el suspenso de los ganchos

¿Quieres solicitar una función o informar de un error ?

Pregunta. Esto también puede estar relacionado con # 14563.

¿Cómo activamos el suspenso de un gancho?

¿Por qué surgió la pregunta?

Esta pregunta surgió durante nuestro uso de react-i18next . Una actualización reciente de react-i18next proporcionó el useTranslation -hook que permite obtener las traducciones actuales y también activará la carga de espacios de nombres de traducción aún no cargados (algo así como la división de código).

Para manejar el caso en el que las traducciones aún no están cargadas, el gancho useTranslation lanza una promesa de activar Suspense , que en realidad es realmente genial porque se integra limpiamente con las funciones de reacción existentes.

Sin embargo, si está utilizando más ganchos después de llamar al useTranslation -hook, estos otros ganchos no se procesarán si useTranslation arroja la promesa. Una vez que se hayan cargado las traducciones, el gancho ya no se lanzará y reaccionará con una gran advertencia roja de que la cantidad de ganchos ha cambiado.

Ejemplo

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 aún no se ha cargado, useTranslation arrojará, lo que provocará que no se procese useState . Una vez que se carga translationnamespace , useTranslation ya no se lanzará, lo que hace que useState se muestre y provoque la advertencia.

El caso general

Entonces, esta pregunta no se aplica solo a react-i18next, sino que se aplica a todos los ganchos que desean activar el suspenso. ¿Cómo haríamos esto, y cómo se integraría esto con las "Reglas de Hooks" actuales que establecen que los hooks no deben renderizarse condicionalmente?