Uzun zamandır beklenen React v18, nihayet birkaç ay önce yayınlandı. Büyük bir değişiklik olmasa da, göz atmaya değer bazı ilginç özellikler eklendi. Bu makale, bazı yeni eklemeleri ve React v18’e nasıl yükseltileceğini ele alacaktır.
React 18’e Nasıl Yükseltilir?
React’in en son sürümünü yüklemek için bu komutu bir terminalde çalıştırın:
npm install react react-dom
Veya iplik kullanıyorsanız:
yarn add react react-dom
En son sürümü yükledikten sonra, yeni özelliklerinden yararlanmaya başlayabilirsiniz.
React 18’de birkaç ekleme var; İşte en dikkate değer olanlardan dördü.
1. Sıkı Mod
StrictMode, bir uygulamadaki olası sorunları vurgulamak için kullanabileceğiniz bir özelliktir. Sıkı mod kontrolleri yalnızca geliştirme modunda çalışır ve üretim yapısını etkilemez. Ancak, kodunuzdaki olası sorunları belirlemede çok yararlı olabilirler.
Uygulamanızın herhangi bir bölümü için katı modu etkinleştirebilirsiniz. Örneğin, tüm bileşenleriniz için veya yalnızca bazıları için etkinleştirebilirsiniz.
import React from ‘react’;
function DemoExample() {
return (
<div>
<FirstComponent />
<React.StrictMode>
<SecondComponent />
<ThirdComponent />
</React.StrictMode>
<FourthComponent />
</div>
);
}
Yukarıdaki kodda, dört bileşenin tümü olası sorunlar için kontrol edilecektir. Ancak katı mod kontrolleri yalnızca <İkinci Bileşen /> ve <Üçüncü Bileşen /> için geçerli olacaktır.
StrictMode başka şekillerde de yardımcı olur, örneğin:
Güvenli olmayan yaşam döngülerine sahip bileşenleri belirleme: Bir bileşenin güvenli olmayan olarak işaretlenmiş bir yaşam döngüsü yöntemi varsa, sıkı mod sizi bu konuda uyarır.
Eski dize ref API kullanımıyla ilgili uyarı: Eski dize ref API’sini kullanıyorsanız, sıkı mod sizi kullanımı konusunda uyarır.
Kullanımdan kaldırılan findDOMNode kullanımı hakkında uyarı: Kullanımdan kaldırılan findDOMNode API’sini kullanıyorsanız katı mod sizi bu konuda uyaracaktır.
Beklenmeyen yan etkileri algılama: Bir bileşen beklenmedik yerlerde yan etkileri (setState gibi) tetikliyorsa, katı mod sizi bu konuda uyarır.
Eski bağlam API’sini algılama: Eski bağlam API’sini kullanıyorsanız (artık kullanımdan kaldırılmıştır), katı mod sizi bu konuda uyarır.
Yeniden kullanılabilir durumu sağlama: Birden çok bileşen tarafından kullanılan bir durumunuz varsa, katı mod düzgün şekilde senkronize edilmesini sağlamaya yardımcı olur.
Genel olarak, katı mod, kodunuzdaki olası sorunları belirlemeye yardımcı olmak için geliştirme aşamasında yararlı bir özellik olabilir.
2. Geçişler
Geçişler, belirli kullanıcı arabirimi güncellemelerini acil değil olarak işaretlemenizi sağlar. Bu, React’in daha önemli olan diğer güncellemelere öncelik verebileceği anlamına gelir.
Örneğin, biri arama sorgusu, diğeri sonuçları için olmak üzere iki metin alanınız varsa, arama sonuçları metin alanını bir geçiş olarak işaretlemek isteyebilirsiniz. Bu şekilde, React, kullanıcı arama sorgusu metin alanına bir şey yazdığında bu metin alanını acilen yeniden oluşturması gerekmediğini bilir.
Bir UI güncellemesini geçiş olarak işaretlemek için startTransition işlevini kullanabilirsiniz. İşte bir örnek:
import { startTransition } from ‘react’;
startTransition(() => {
// Mark any non-urgent state updates inside as transitions
});
Bu kod, startTransition işlevi içindeki tüm durum güncellemelerini geçişler olarak işaretler. Bu şekilde, React diğer daha önemli UI güncellemelerine odaklanabilir.
3. Otomatik Gruplama
React, bir durum değiştiğinde meydana gelen yeniden oluşturma sayısını azaltan, gruplama adı verilen yararlı bir özellik sağlar. Bu, özellikle eşzamansız kodla çalışırken performansı optimize etmede çok yardımcı olabilir .
Önceden, bir sözünüz varsa veya bir ağ araması yapıyorsanız, durum güncellemeleri toplu işlenmezdi ve React’in birden çok kez yeniden işlenmesi gerekirdi. Bununla birlikte, React 18’deki otomatik toplu işleme ile tüm durum güncellemeleri, hatta sözler, setTimeout’lar ve olay geri aramaları içinde bile gruplanır. Bu, React’in arka planda yapması gereken işi önemli ölçüde azaltır.
FlushSync işlevini kullanarak toplu durum güncellemelerini manuel olarak yapabilirsiniz, ancak React 18’den itibaren bu işlem artık otomatiktir. React, yeniden oluşturmadan önce bir mikro görevin bitmesini bekleyeceğinden, bu çok daha iyi bir performansla sonuçlanır.
4. Yeni Kancalar
Sürüm 18 , useId, useTransition ve useDeferredValue dahil olmak üzere birçok yeni React kancasını sunar. Bu yeni Kancalar, React uygulamalarınıza minimum çabayla ekstra işlevsellik eklemek için harika bir yol sağlar.
React 18, Artırılmış Uygulama Performansı Sağlıyor
React 18 burada ve beraberinde web uygulaması performansında bazı harika iyileştirmeler getiriyor. React’in yeni sürümüyle, daha duyarlı ve genel olarak daha iyi performans gösteren web uygulamalarını kolayca oluşturabilirsiniz. Bu nedenle, sorunsuz çalışan ve harika görünen bir web uygulaması oluşturmak istiyorsanız, React 18’i kontrol ettiğinizden emin olun.