React 18 — useEffect'in hilesi

React 18'de Strict Mode kullanırken useEffect kancasının zor davranışı hakkında bilgi edinin

React 18, birkaç hafta önce çıktı. Bir avuç iyileştirme getirmesine rağmen, en sık kullanılan kancalardan birine oldukça garip bir davranış getiriyor. Bunun ne olduğunu bilmek ister misin? İşte başlıyoruz…

yalnızca ilk bağlamada çalışması gereken useEffect() iki kez çalışır!

Evet, doğru duydunuz! React 18'i Katı Modda kullanıyorsanız, aşağıdaki kod parçası:

Böyle bir çıktı üretecekti:

Hello there!
Hello there!

Belgelerde belirtildiği gibi , React 18, Strict Mode'a yalnızca geliştirme amaçlı yeni bir kontrol sunar. Bu yeni kontrol, bir bileşen ilk kez takıldığında, ikinci montajda önceki durumu geri yükleyerek her bileşeni otomatik olarak kaldırır ve yeniden bağlar .

Böyle bir karar React ekibi tarafından alındı, gelecekte olduğu gibi, React'in durumu korurken kullanıcı arayüzünün bölümlerini eklemesine ve kaldırmasına izin veren bir özellik eklemek istiyorlar. Bileşenlerin birden çok kez monte edilen ve yok edilen etkilere karşı dayanıklı olmasını gerektirdiğinden, ek bir kontrol getirildi.

Yani her bir bileşen monte edilmiş, ardından sökülmüş ve nihayet yeniden monte edilmiş mi?

Evet, şimdi bu şekilde çalışıyor. useEffect()Kancayı şu şekilde kullanırsak :

Sayfayı yeniledikten sonra çıktı şöyle olur:

Mounting...
Unmounting...
Mounting...

Özet

React 18, Strict Mode'a yalnızca geliştirme amaçlı yeni bir kontrol getiriyor. Bu kontrol, bileşeni otomatik olarak ayırır ve yeniden monte eder, ilk montajda useEffect kancasını iki kez ateşler.