React.Js useILayoutEffect() Kullanımı

React.Js useILayoutEffect() Kullanımı

useILayoutEffect()

useLayoutEffect React'ta bir hook'tur ve useEffect'e çok benzer bir şekilde çalışır. Ancak, useLayoutEffect'in çağrıldığı kod, DOM güncellemeleri ekrana yansımadan hemen önce çalışır. Bu, layout (düzen) hesaplamaları ve okumaları için kullanılır, böylece kullanıcıya görsel olarak tutarsız bir arayüz gösterilmesi önlenir.

Kullanımı

useLayoutEffect'in temel sözdizimi useEffect ile aynıdır:

useLayoutEffect(() => {
// Yan etki kodu burada yer alır
return () => {
// Temizleme kodu (opsiyonel)
};
}, [dependency1, dependency2]); // Bağımlılık dizisi

Örnek
 

import React, { useLayoutEffect, useRef } from 'react';
function App() {
const divRef = useRef(null);
useLayoutEffect(() => {
const rect = divRef.current.getBoundingClientRect();
console.log(`Height: ${rect.height}, Width: ${rect.width}`);
}, []); // Bağımlılık dizisi boş, yani sadece ilk render'da çalışır
return (
<div ref={divRef}>
Hello, world!
</div>
);
}

Bu örnekte, useLayoutEffect kullanılarak bir div elementinin boyutları hesaplanmıştır. Bu kod, DOM güncellemeleri ekrana yansımadan hemen önce çalışır, bu yüzden kullanıcı herhangi bir görsel tutarsızlık görmeyecektir.

Dikkat Edilmesi Gerekenler

• useLayoutEffect yalnızca bileşenlerin en üst seviyesinde kullanılmalıdır. Döngüler, koşullar veya iç içe fonksiyonlar içinde kullanılmamalıdır.
• useLayoutEffect'in çalıştığı kod, render döngüsünü bloklayabilir. Bu yüzden, bu hook'u yalnızca gerekli olduğunda kullanmak önemlidir.
• Sunucu tarafı render (SSR) yapıyorsanız, useLayoutEffect kullanmaktan kaçının. Bu hook, sunucu tarafında çalışmaz ve uyarılara neden olabilir. Bu tür durumlar için genellikle useEffect daha uygun bir seçenektir.
• Genel olarak, useLayoutEffect yalnızca DOM okumaları ve yazmaları arasında görsel tutarsızlıkları önlemek için kullanılır. Eğer bu tür bir ihtiyaç yoksa, genellikle useEffect kullanmak daha iyidir.