Fast Refresh

Hızlı Yenileme, React bileşenlerinizde yapılan düzenlemeler hakkında size anlık geri bildirim sağlayan bir Next.js özelliğidir. Hızlı Yenileme, 9.4 veya daha yeni sürümlerdeki tüm Next.js uygulamalarında varsayılan olarak etkindir. Next.js Hızlı Yenileme etkinleştirildiğinde, çoğu düzenleme bileşen durumunu kaybetmeden bir saniye içinde görünür olmalıdır.

How It Works

• Yalnızca React bileşenlerini dışa aktaran bir dosyayı düzenlerseniz, Hızlı Yenileme yalnızca o dosyanın kodunu günceller ve bileşeninizi yeniden oluşturur. Stiller, işleme mantığı, olay işleyicileri veya efektler dahil olmak üzere bu dosyadaki her şeyi düzenleyebilirsiniz.
• React bileşenleri olmayan dışa aktarımlara sahip bir dosyayı düzenlerseniz, Fast Refresh hem o dosyayı hem de onu içe aktaran diğer dosyaları yeniden çalıştırır. Yani hemButton.js hem de Modal.js, theme.js'yi içe aktarıyorsa, theme.js 'u düzenlemek her iki bileşeni de güncelleyecektir.
• Son olarak, React ağacının dışındaki dosyalar tarafından içe aktarılan bir dosyayı düzenlerseniz, Hızlı Yenileme tam bir yeniden yükleme yapmaya geri dönecektir. Bir React bileşenini oluşturan ama aynı zamanda React olmayan bir bileşen tarafından içe aktarılan bir değeri dışa aktaran bir dosyanız olabilir. Örneğin, bileşeniniz bir sabiti de dışa aktarıyor ve React olmayan bir yardımcı program dosyası bunu içe aktarıyor olabilir. Bu durumda, sabiti ayrı bir dosyaya taşımayı ve her iki dosyaya da içe aktarmayı düşünün. Bu, Hızlı Yenileme'nin çalışmasını yeniden etkinleştirecektir. Diğer durumlar genellikle benzer şekilde çözülebilir.

Error Resilience

Syntax Errors

Geliştirme sırasında bir sözdizimi hatası yaparsanız, bunu düzeltebilir ve dosyayı tekrar kaydedebilirsiniz. Hata otomatik olarak kaybolur, böylece uygulamayı yeniden yüklemeniz gerekmez. Bileşen durumunu kaybetmezsiniz.

Runtime Errors

Bileşeninizin içinde çalışma zamanı hatasına yol açan bir hata yaparsanız, bağlamsal bir kaplama ile karşılaşacaksınız. Hatayı düzeltmek, uygulamayı yeniden yüklemeden yer paylaşımını otomatik olarak kapatacaktır.

Render sırasında hata oluşmadıysa bileşen durumu korunacaktır. Render sırasında hata oluştuysa, React güncellenmiş kodu kullanarak uygulamanızı yeniden yükleyecektir.

Uygulamanızda hata sınırlarıvarsa (üretimde zarif hatalar için iyi bir fikirdir), bir işleme hatasından sonra bir sonraki düzenlemede yeniden oluşturmayı deneyeceklerdir. Bu, bir hata sınırına sahip olmanın her zaman kök uygulama durumuna sıfırlanmanızı önleyebileceği anlamına gelir. Ancak hata sınırlarının çok ayrıntılı olmaması gerektiğini unutmayın. Bunlar React tarafından üretimde kullanılır ve her zaman bilinçli olarak tasarlanmalıdır.

Limitations

Hızlı Yenileme, düzenlediğiniz bileşendeki yerel React durumunu korumaya çalışır, ancak bunu yapmak güvenliyse. İşte bir dosyadaki her düzenlemede yerel durumun sıfırlandığını görmenizin birkaç nedeni:

• Sınıf bileşenleri için yerel durum korunmaz (yalnızca işlev bileşenleri ve Kancalar durumu korur).
• Düzenlediğiniz dosyada bir React bileşenine ek olarak başka dışa aktarımlar da olabilir.
• Bazen bir dosya, HOC(WrappedComponent) gibi daha üst düzey bir bileşenin çağrılmasının sonucunu dışa aktarır. Döndürülen bileşen bir sınıf ise, durumu sıfırlanacaktır.
• export default () => <div />; gibi anonim ok işlevleri Hızlı Yenileme'nin yerel bileşen durumunu korumamasına neden olur. Büyük kod tabanları için name-default-component codemod'umuzu kullanabilirsiniz.

Kod tabanınızın daha büyük bir kısmı fonksiyon bileşenlerine ve Hook'lara geçtikçe, durumun daha fazla durumda korunmasını bekleyebilirsiniz.

Tips

• Hızlı Yenileme, varsayılan olarak işlev bileşenlerinde (ve Hook'larda) React yerel durumunu korur.
• Bazen durumun sıfırlanmasını ve bir bileşenin yeniden monte edilmesini isteyebilirsiniz. Örneğin, yalnızca montaj sırasında gerçekleşen bir animasyonu değiştiriyorsanız bu kullanışlı olabilir. Bunu yapmak için, düzenlediğiniz dosyanın herhangi bir yerine // @refresh resetekleyebilirsiniz. Bu yönerge dosya için yereldir ve Fast Refresh'e her düzenlemede o dosyada tanımlanan bileşenleri yeniden monte etmesi talimatını verir.
• Geliştirme sırasında düzenlediğiniz bileşenlere console.log veya debugger; adreslerini koyabilirsiniz.
• İçe aktarmaların büyük/küçük harfe duyarlı olduğunu unutmayın. İçe aktarma işleminiz gerçek dosya adıyla eşleşmediğinde hem hızlı hem de tam yenileme başarısız olabilir. Örneğin, './header' vs './Header'.

Fast Refresh and Hooks

Mümkün olduğunda Hızlı Yenileme, düzenlemeler arasında bileşeninizin durumunu korumaya çalışır. Özellikle, useState ve useRef, argümanlarını veya Hook çağrılarının sırasını değiştirmediğiniz sürece önceki değerlerini korur.

Bağımlılıkları olan kancalar - örneğin useEffect, useMemo ve useCallback- Hızlı Yenileme sırasında herzaman güncellenecektir. Hızlı Yenileme gerçekleşirken bağımlılık listeleri göz ardı edilecektir.

Örneğin, useMemo(() => x * 2, [x]) adresiniuseMemo(() => x * 10, [x]) olarak düzenlediğinizde, x (bağımlılık) değişmemiş olsa bile yeniden çalışacaktır. Eğer React bunu yapmasaydı, düzenlemeniz ekrana yansımazdı!

Bazen bu beklenmedik sonuçlara yol açabilir. Örneğin, boş bir bağımlılık dizisine sahip bir useEffectbile Hızlı Yenileme sırasında bir kez yeniden çalışacaktır.

Ancak, Hızlı Yenileme olmasa bile useEffect 'un ara sıra yeniden çalıştırılmasına dayanıklı kod yazmak iyi bir uygulamadır. Bu, daha sonra yeni bağımlılıklar eklemenizi kolaylaştıracaktır ve etkinleştirmenizi şiddetle tavsiye ettiğimiz React Strict Mode tarafından zorlanmaktadır.