useLayoutEffect vs useEffect: React Yan Etkileri \u0130\u00e7in Pratik Bir K\u0131lavuz<\/p>\n
React bile\u015fenlerinde, kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6r\u00fcnen de\u011fi\u015fikliklerden ba\u011f\u0131ms\u0131z olarak, yan etkilerle ba\u015fa \u00e7\u0131kman\u0131z gerekebilir. Bu yan etkiler, veri \u00e7ekme, DOM manip\u00fclasyonu veya zamanlama i\u015flemleri gibi i\u015flemleri i\u00e7erir. React, bu yan etkileri y\u00f6netmek i\u00e7in \u00d6rnek olarak, bir bile\u015fen render oldu\u011funda API’den veri \u00e7ekmek istedi\u011fimizi varsayal\u0131m:<\/p>\n “`jsx function DataFetcher() { useEffect(() => { fetchData(); if (!data) { ; return (<\/p>\n {data.description}<\/p>\n<\/p><\/div>\n ); export default DataFetcher; Bu \u00f6rnekte, \u00d6rnek olarak, bir bile\u015fenin y\u00fcksekli\u011fini dinamik olarak ayarlamam\u0131z gerekti\u011fini varsayal\u0131m. “`jsx function DynamicHeight() { useLayoutEffect(() => { return (<\/p>\n ); export default DynamicHeight; Bu \u00f6rnekte, Genel olarak, \u0130\u015fte bir \u00f6zet tablo:<\/p>\n #EtiketleruseEffect<\/code> ve useLayoutEffect<\/code> hook’lar\u0131n\u0131 sunar. Her iki hook da benzer \u015fekilde kullan\u0131l\u0131r, ancak \u00f6nemli bir farklar\u0131 vard\u0131r: **zamanlama**.<\/p>\nuseEffect: G\u00f6r\u00fcnt\u00fcleme D\u00f6ng\u00fcs\u00fc Sonras\u0131nda \u00c7al\u0131\u015fma<\/h2>\n
useEffect<\/code> hook’u, React bile\u015feninin DOM’a render edilmesinden sonra \u00e7al\u0131\u015f\u0131r. Bu, bile\u015feniniz yeniden olu\u015fturulduktan ve g\u00f6r\u00fcnd\u00fckten sonra, t\u00fcm DOM g\u00fcncellemeleri tamamland\u0131ktan sonra yan etkiyi tetikler. Bu durum, veri \u00e7ekme gibi senkron olmayan i\u015flemler i\u00e7in veya DOM manip\u00fclasyonu gerektiren ancak render performans\u0131n\u0131 etkilemeyen g\u00f6revler i\u00e7in idealdir.<\/p>\n
\nimport React, { useState, useEffect } from ‘react’;<\/p>\n
\n const [data, setData] = useState(null);<\/p>\n
\n const fetchData = async () => {
\n const response = await fetch(‘https:\/\/api.example.com\/data’);
\n const json = await response.json();
\n setData(json);
\n };<\/p>\n
\n }, []);<\/p>\n
\n return <\/p>\n
\n }<\/p>\n
\n}<\/p>\n
\n“`<\/p>\nuseEffect<\/code> hook’u, bile\u015fen render edildikten sonra API \u00e7a\u011fr\u0131s\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r. Veriler y\u00fcklenene kadar “Veriler y\u00fckleniyor…” mesaj\u0131 g\u00f6sterilir ve daha sonra veri ba\u015far\u0131l\u0131 bir \u015fekilde al\u0131n\u0131r ve bile\u015fen g\u00fcncellenir.<\/p>\nuseLayoutEffect: G\u00f6r\u00fcnt\u00fcleme D\u00f6ng\u00fcs\u00fc S\u0131ras\u0131nda \u00c7al\u0131\u015fma<\/h2>\n
useLayoutEffect<\/code> hook’u, useEffect<\/code> ile benzer \u015fekilde \u00e7al\u0131\u015f\u0131r ancak \u00f6nemli bir farkla: **render d\u00f6ng\u00fcs\u00fc s\u0131ras\u0131nda** \u00e7al\u0131\u015f\u0131r. Bu, bile\u015fen DOM’a render edilmeden \u00f6nce, ancak ekran\u0131 yeniden \u00e7izmeden \u00f6nce yan etkinin \u00e7al\u0131\u015ft\u0131\u011f\u0131 anlam\u0131na gelir. Bu durum, DOM’a yap\u0131lan de\u011fi\u015fikliklerin kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc etkiledi\u011fi ve hemen yans\u0131mas\u0131 gereken g\u00f6revler i\u00e7in idealdir.<\/p>\nuseLayoutEffect<\/code> ile, bile\u015fen render edildikten sonra, ancak ekran yeniden \u00e7izmeden \u00f6nce, y\u00fcksekli\u011fi ayarlayabiliriz:<\/p>\n
\nimport React, { useState, useLayoutEffect } from ‘react’;<\/p>\n
\n const [height, setHeight] = useState(0);<\/p>\n
\n const element = document.getElementById(‘myElement’);
\n setHeight(element.offsetHeight);
\n }, []);<\/p>\n
\n}<\/p>\n
\n“`<\/p>\nuseLayoutEffect<\/code> hook’u, bile\u015fen render edildikten sonra, ancak ekran yeniden \u00e7izmeden \u00f6nce, myElement<\/code> \u00f6\u011fesinin y\u00fcksekli\u011fini hesaplar ve setHeight<\/code> durumunu g\u00fcnceller. Bu sayede, y\u00fckseklik hemen do\u011fru bir \u015fekilde ayarlan\u0131r ve kullan\u0131c\u0131 bir gecikme ya\u015famaz.<\/p>\nHangisini Kullanmal\u0131y\u0131m?<\/h2>\n
useEffect<\/code>, **senkron olmayan i\u015flemler** veya DOM manip\u00fclasyonu gerektiren, ancak kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc hemen etkilemeyen g\u00f6revler i\u00e7in tercih edilmelidir. \u00d6te yandan, useLayoutEffect<\/code>, DOM’a yap\u0131lan de\u011fi\u015fikliklerin **an\u0131nda yans\u0131mas\u0131** gereken g\u00f6revler i\u00e7in kullan\u0131lmal\u0131d\u0131r. Bu nedenle, DOM’a yap\u0131lan de\u011fi\u015fiklikler kullan\u0131c\u0131n\u0131n hemen g\u00f6rmesi gereken durumlarda veya performans\u0131 etkileyecek bir render i\u015flemi oldu\u011funda useLayoutEffect<\/code> kullan\u0131lmal\u0131d\u0131r.<\/p>\n\n\n
\n \nHook<\/th>\n Zamanlama<\/th>\n Kullan\u0131m Durumlar\u0131<\/th>\n<\/tr>\n<\/thead>\n \n useEffect<\/code><\/td>\nRender d\u00f6ng\u00fcs\u00fc sonras\u0131nda<\/td>\n \n \n
\n useLayoutEffect<\/code><\/td>\nRender d\u00f6ng\u00fcs\u00fc s\u0131ras\u0131nda<\/td>\n \n \n
Sonu\u00e7<\/h2>\n
useEffect<\/code> ve useLayoutEffect<\/code> hook’lar\u0131, React bile\u015fenlerinde yan etkileri y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Her iki hook da benzer \u015fekilde kullan\u0131l\u0131r, ancak **zamanlama** a\u00e7\u0131s\u0131ndan farkl\u0131l\u0131k g\u00f6sterirler. useEffect<\/code>, render d\u00f6ng\u00fcs\u00fc sonras\u0131nda \u00e7al\u0131\u015f\u0131rken, useLayoutEffect<\/code> render d\u00f6ng\u00fcs\u00fc s\u0131ras\u0131nda \u00e7al\u0131\u015f\u0131r. Do\u011fru hook’u se\u00e7mek, uygulama performans\u0131n\u0131 optimize etmek ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in \u00e7ok \u00f6nemlidir. Bu k\u0131lavuz, React bile\u015fenlerinde yan etkileri y\u00f6netmek i\u00e7in gereken bilgileri sa\u011flayarak, daha etkili ve verimli uygulamalar olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r. E\u011fer React ve hook’lar hakk\u0131nda daha fazla bilgi edinmek istiyorsan\u0131z, kendi web sitemi [fatihsoysal.com](https:\/\/fatihsoysal.com) ziyaret edebilirsiniz.<\/p>\n
\nReact, useEffect, useLayoutEffect, Yan Etkiler, Hook’lar, Performans, DOM Manip\u00fclasyonu, API \u00c7a\u011fr\u0131lar\u0131, Render D\u00f6ng\u00fcs\u00fc, Zamanlama, Kullan\u0131c\u0131 Deneyimi, Web Geli\u015ftirme, JavaScript, K\u0131lavuz, Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"useLayoutEffect vs useEffect: React Yan Etkileri \u0130\u00e7in Pratik Bir K\u0131lavuz React bile\u015fenlerinde, kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6r\u00fcnen de\u011fi\u015fikliklerden ba\u011f\u0131ms\u0131z olarak,…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3067","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n