React: Memicu ketegangan dari kait

Apakah Anda ingin meminta fitur atau melaporkan bug ?

Pertanyaan. Ini mungkin juga terkait dengan #14563.

Bagaimana kita memicu ketegangan dari sebuah kail?

Mengapa pertanyaan itu muncul?

Pertanyaan ini muncul selama penggunaan react-i18next . Pembaruan terbaru react-i18next menyediakan useTranslation -hook yang memungkinkan memperoleh terjemahan saat ini dan juga akan memicu pemuatan ruang nama terjemahan yang belum dimuat (seperti pemecahan kode).

Untuk menangani kasus di mana terjemahan belum dimuat, useTranslation -hook memberikan janji untuk memicu Suspense , yang sebenarnya sangat rapi karena terintegrasi secara rapi dengan fitur reaksi yang ada!

Namun, jika Anda menggunakan lebih banyak kait setelah memanggil useTranslation -hook, kait lain ini tidak akan dirender jika useTranslation memberikan janji. Setelah terjemahan dimuat, kait tidak akan terlempar lagi dan reaksi akan memberi Anda peringatan merah besar bahwa jumlah kait telah berubah.

Contoh

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

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

Jika translationnamespace belum dimuat, useTranslation akan muncul, menyebabkan useState tidak dapat dirender. Setelah translationnamespace dimuat, useTranslation tidak akan dilempar lagi, yang menyebabkan useState dirender yang menyebabkan peringatan.

Kasus Umum

Jadi pertanyaan ini tidak hanya berlaku untuk react-i18next saja, tetapi berlaku untuk semua kait yang ingin memicu ketegangan. Bagaimana kita akan melakukan ini, dan bagaimana ini akan terintegrasi dengan "Aturan Kait" saat ini yang menyatakan bahwa kait tidak boleh dirender secara kondisional?