React Hooks: useState — useLayoutState
React’in 16.8 versiyonu ile birlikte hayatımıza Hook kavramı girdi. Artık çok daha az kod ile daha efektif React Componentleri yazabiliyoruz. Hooks konusu ile ilgili detaylı bilgiyi React’in kendi dokümantasyonundan okuyabilir, bilgi sahibi olabilirsiniz.
Ben bu yazıda sık olarak kullanılan useEffect ve belki de çok bilinmeyen, kullanılmayan başka bir Hook olan useLayoutState kullanımlarına değinmeye çalışacağım.
useEffect
useEffect’in, useState ile birlikte en popüler Hook olduğu söylemek sanırım yanlış olmaz. Peki ne yapıyor bu arkadaş? Aslında tam olarak bazı lifecycle metotları yerine geçebilen bir Hook diyebiliriz. Örnek verecek olursak; önceden React.Component ile bir Class Component oluşturuyor ve bu class component ile birlikte componentDidMount, componentDidUpdate ve componentWillUnmount gibi metotları kullanabiliyorduk. Bu metotları Functional bir component ile birlikte kullanmak istersek, imdadımıza bu useEffect Hook’u yetişiyor. Bunlar temel olarak şu durumları ele almamızı sağlıyor:
- componentDidMount: Component oluşturulduktan sonra yapılacak işlemler.
- componentDidUpdate: Component güncellendikten sonra yapılacak işlemler
- componentWillUnmount: Component kaldırılacağı zaman yapılacak işlemler.
useEffect(() => {
// yapılacaklar
});Bu kod ile basit bir useEffect metodu yazdık. bu metot componentDidMount ve componentDidUpdate işlemleri yapacak. Eğer bunları ayırt etmek istersek, useEffect metoduna ikinci bir parametre vermeliyiz. Örnek olarak;
// componentDidMount için
useEffect(() => {
// yapılacaklar
}, []);
// componentDidUpdate için
useEffect(() => {
// yapılacaklar
}, [test]);
Yukarıda iki adet örnek tanımlama yaptık. Bunlardan ilki componentDidMount için. Eğer useEffect metoduna ikinci parametre olarak boş bir dizi [] verirseniz, bu durumda useEffect metodunuz componentDidMount davranışı gösterecektir. Yani component oluştuğunda bir kere çalışacak ve bir daha çalışmayacak.
İkinci örnekte ise parametre olarak; useEffect metoduna ikinci parametre olarak vermiş olduğumuz dizi [] içerisine bir de değer ekledik. Bu bir değişken (variable); herhangi bir state, props vs olabilir. Burada ise useEffect’in çalışma durumunu dizi içerisine yazılan değer veya değerlere bağlı kıldık. Böylece componentDidUpdate işlemini tetikleyebiliyoruz. Örneğe göre test değişkeninin değeri değiştiğinde, useEffect metodu tekrar tetiklenecek ve içerisine yazdığınız işlemler tekrarlanacaktır. Dizi içerisine birden fazla variable yazabileceğinizi de belirteyim.
Şimdi gelelim componentWillUnmount’a. Bunun için useEffect içerisinde bir function return edeceğiz ve bu function içerisinde yapılacak işlemler, component kaldırılacağı zaman yapılacak işlemlerimiz olacak. Hemen bir örnek bakalım.
useEffect(() => {
// yapılacaklar return () => {
// componentWillUnmount işlemleri
}
}, []);
Yukarıda gördüğünüz gibi bir componenDidMount işlemi için useEffect kullandık ve bunun içerisinde componentWillUnmount için de bir tanımlama yaptık. Kullanım bu kadar basit. Biraz pratik denemeler yaparak hızlıca ve daha net şekilde kafanızda oturtacağınıza eminim.
useLayoutEffect
useEffect ve useLayoutEffect aslında kardeş gibiler. Kullanımları aynı diyebiliriz. Sadece kullanım yeri/amacı değişiyor. Eğer direkt olarak DOM ile ilgili işlem yapacaksanız useLayoutEffect kullanmak daha avantajlı olabilir. Küçük bir örnek yapalım:
const Test = () => {
const [value, setValue] = useState('Initial'); useEffect(() => {
setValue('React');
}); return <div>{value}</div>;
};
Yukarıdaki örneği çalıştırmayı denediğinizde, sayfanız render olduğunda çok kısa bir süre de olsa ekranda önce “Initial” yazısı göreceksiniz sonra hemen değişip, “React” yazacak. Bu tip durumların çözümü için React’in kendi dokümantasyonunda da useLayoutEffect kullanmamız öneriliyor. Kısaca DOM ile ilgili etkileşimlerde (daha etkin etkileşim diyebiliriz) useLayoutEffect tercih edebilirsiniz. Bu örnekte useLayoutEffect kullanırsanız, bahsettiğim render sorunu ortadan kalkacaktır.
Şimdi bir başka hususa değinelim:
const Test = () => {
useEffect(() => {
console.log('useEffect çalıştı');
}); useLayoutEffect(() => {
console.log('useLayoutEffect çalıştı');
}); return <h1>useEffect Örnek</h1>;
};
Yukarıdaki componenti çalıştırmayı denerseniz, console loglarında önce “useLayoutEffect çalıştı” daha sonra “useEffect çalıştı” loglarını göreceksiniz. useLayoutEffect tanımlamasını, useEffect’in sonrasında yapmış olmamıza rağmen, diğeri daha hızlı çıktı verecek. Bunun sebebi; useLayoutEffect’in, useEffect’e göre async işlemlerde daha hızlı olması. Yani iki Hook’u birlikte kullandığınız durumlar olursa, bu durumda en önce useLayoutEffect çalışacaktır.
Umarım biraz olsun aradaki useEffect ve useLayoutEffect nedir, aydınlatabilmişimdir. Konu hakkında söylemek / eklemek istediğiniz şeyler varsa, duymaktan çok memnun olurum.
Bir sonraki yazıda React componentlerinde performansları arttırmak için useMemo (React.Memo) ve useCallback kullanımıyla alakalı konulara değineceğiniz.
Sağlıcakla kalın.
