React: 후크에서 서스펜스 트리거

기능 을 요청하거나 버그를보고 하시겠습니까?

질문. # 14563과 관련이있을 수도 있습니다.

후크에서 서스펜스를 어떻게 트리거합니까?

질문이 나온 이유는 무엇입니까?

이 질문은 react-i18next 사용하는 동안 발생했습니다. react-i18next 의 최근 업데이트는 useTranslation -hook을 제공하여 현재 번역을 가져올 수 있으며 아직로드되지 않은 번역 네임 스페이스의로드도 트리거합니다 (코드 분할과 유사).

번역이 아직로드되지 않은 경우를 처리하기 위해 useTranslation -hook는 Suspense 를 트리거하겠다는 약속을 던집니다. 이는 기존 반응 기능과 깔끔하게 통합되기 때문에 실제로 정말 깔끔합니다!

당신이 호출 한 후 더 후크를 사용하는 경우에는 useTranslation -hook를 들면 다른 후크 렌더링되지 않습니다 useTranslation 약속을 던졌습니다. 번역이로드되면 후크가 더 이상 던지지 않고 반응이 후크의 양이 변경되었다는 큰 빨간색 경고를 표시합니다.

예

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에만 적용되는 것이 아니라 서스펜스를 트리거하려는 모든 후크에 적용됩니다. 이 작업을 수행하는 방법은 무엇이며, 후크가 조건부로 렌더링되지 않아야한다는 현재의 "후크 규칙"과 어떻게 통합 될까요?