React: Spannung aus Hooks auslösen

Möchten Sie eine Funktion anfordern oder einen Fehler melden?

Frage. Dies kann auch mit #14563 zusammenhängen.

Wie lösen wir Spannung von einem Haken aus?

Warum kam die Frage?

Diese Frage kam während unserer Verwendung von react-i18next . Ein aktuelles Update von react-i18next hat den useTranslation -Hook bereitgestellt, der das Abrufen der aktuellen Übersetzungen ermöglicht und auch das Laden von noch nicht geladenen Übersetzungs-Namespaces auslöst (ein bisschen wie Code-Splitting).

Um den Fall zu handhaben, dass die Übersetzungen noch nicht geladen sind, wirft der useTranslation -Hook ein Versprechen, Suspense auszulösen, was eigentlich sehr nett ist, weil es sich sauber in die vorhandenen Reaktionsfunktionen integriert!

Wenn Sie jedoch nach dem Aufruf des useTranslation -Hooks weitere Hooks verwenden, werden diese anderen Hooks nicht gerendert, wenn useTranslation das Versprechen wirft. Sobald die Übersetzungen geladen sind, wirft der Hook nicht mehr und reagiert mit einer großen roten Warnung, dass sich die Anzahl der Hooks geändert hat.

Beispiel

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

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

Wenn translationnamespace noch nicht geladen ist, wird useTranslation geworfen, wodurch useState nicht gerendert wird. Sobald translationnamespace geladen ist, wird useTranslation nicht mehr ausgelöst, was dazu führt, dass useState gerendert wird und die Warnung verursacht.

Der allgemeine Fall

Diese Frage gilt also nicht nur für React-i18next, sondern für alle Hooks, die Spannung auslösen wollen. Wie würden wir das machen und wie würde dies in die aktuellen "Regeln für Hooks" integriert, die besagen, dass Hooks nicht bedingt gerendert werden dürfen?