Adı : useLayoutEffect Hooku Nedir?

useLayoutEffect Hook nedir?
useLayoutEffect Hook, React komponentlerinin DOM'a monte edilmeden önce veya güncellenmeden önce yapılacak olan işlemleri gerçekleştirmek için kullanılan bir React Hook'udur. Bu hook'u kullanarak, sayfa yeniden boyutlandırıldığında veya farklı bir durumda güncellenirken en son yapılan ayarlar arasında güncelleme yapabilirsiniz. useLayoutEffect Hook, React komponentlerindeki DOM nesnelerini doğrudan manipüle etmek için kullanışlıdır.
useLayoutEffect Hook Nasıl Kullanılır?
useLayoutEffect Hook, React Hook'ları içinde yer alır ve kullanımı oldukça basittir. Öncelikle, useLayoutEffect Hook'una ihtiyacınız olan komponent içinde import edeceksiniz. UseLayoutEffect Hook'u komponentinizin içinde, useEffect Hook'u ile aynı şekilde kullanılacaktır. Fakat, useLayoutEffect Hook, useEffect Hook'tan farklı olarak, performans gerektiren işlemleri yaparken biraz daha hızlıdır.

Örneğin; aşağıdaki kod bloğunda, useLayoutEffect Hook'u react-fc komponenti aracılığıyla kullanılmak üzere import edilmiştir.
import {useLayoutEffect} from 'react';
React komponenti içindeki useLayoutEffect Hook'u şu şekilde kullanılacaktır:
useLayoutEffect(() => {
// işlemleriniz burada yer alacaktır
});
Aşağıda, useLayoutEffect Hook'u kullanarak yanan güneş efektiyle ilgili bir örnek gösterilmiştir:
import React, {useEffect, useLayoutEffect, useState} from 'react';
export default function App() {
const [count, setCount] = useState(0);
const [showSun, setShowSun] = useState(false);
useLayoutEffect(() => {
if (count % 3 === 0) {
setShowSun(true);
} else {
setShowSun(false);
}
}, [count]);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
return (

);
}
Yukarıdaki kodda, useLayoutEffect Hook'u kullanılarak, yeniden boyutlanan hal de dahil olmak üzere güncelleme yapıldığında, sayfa üstündeki bir güneş objesinin görünmesi sağlanmıştır. Bunun yanı sıra, useEffect Hook'u kullanılarak, sayfa başlığı her güncellemede güncellenir.
Sık Sorulan Sorular
1) Kullanıcı sayfa boyutunu değiştirdiğinde, useLayoutEffect Hook ne yapar?
cevap: useLayoutEffect Hook, sayfa yeniden boyutlandığında veya farklı bir durumda güncellendiğinde en son yapılan ayarlar arasında güncelleme yapabilir.
2) useLayoutEffect Hook'un componentDidMount() gibi React Componenent işlevleriyle bir ilgisi var mıdır?
cevap: Evet, useLayoutEffect Hook, React komponentlerinin DOM'a monte edilmeden önce veya güncellenmeden önce yapılacak olan işlemleri gerçekleştirmek için kullanılan bir Hook olarak, componentDidMount() gibi React Component işlevleriyle özellikleri eşit bir işlev sellisini yerine getirir.
3) useLayoutEffect Hook'un useEffect Hook'tan farkı nedir?
cevap: useLayoutEffect Hook, useEffect Hook'tan farklı olarak, performans gerektiren işlemleri yaparken biraz daha hızlıdır. Ayrıca useLayoutEffect Hook'un, useEffect Hook'tan önce yapılacak işlemlerle ilgili bir numune işlevi vardır.