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

  • 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

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.

Kaynak

nam-ı diğer Buki. 👨🏻‍💻 . Software Engineer at NETAŞ — #php #java #golang #javascript #react-native— Founder at HaberSistemim

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store