React Render Optimizasyonu: useDeferredValue ve useTransition<\/p>\n
Merhaba! Ben Fatih Soysal ve bug\u00fcn size React uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak i\u00e7in kullanabilece\u011finiz iki harika hook’tan, Yukar\u0131daki \u00f6rnekte, Bu \u00f6rnekte, #Etiketler: React, useDeferredValue, useTransition, Performans Optimizasyonu, React Hook’lar\u0131, Render Optimizasyonu, Kullan\u0131c\u0131 Deneyimi, JavaScript<\/p>\n","protected":false},"excerpt":{"rendered":"React Render Optimizasyonu: useDeferredValue ve useTransition Merhaba! Ben Fatih Soysal ve bug\u00fcn size React uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak i\u00e7in…","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-18639","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nuseDeferredValue<\/code> ve useTransition<\/code>‘dan bahsedece\u011fim. Bu hook’lar, \u00f6zellikle kullan\u0131c\u0131 aray\u00fcz\u00fcnde s\u0131k g\u00fcncellemelerin oldu\u011fu durumlarda, performans sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in olduk\u00e7a etkilidir. \u00d6rne\u011fin, uzun bir listeyi filtrelerken veya b\u00fcy\u00fck bir veri k\u00fcmesini i\u015flerken, aray\u00fcz\u00fcn donmas\u0131n\u0131 veya yava\u015flamas\u0131n\u0131 engellemek i\u00e7in bu hook’lar\u0131 kullanabilirsiniz. Bu makalede, bu hook’lar\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, ne zaman kullanman\u0131z gerekti\u011fini ve \u00f6rneklerle birlikte nas\u0131l uygulayabilece\u011finizi detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z.<\/p>\nuseDeferredValue: Gecikmeli De\u011fer G\u00fcncellemeleri<\/h2>\n
useDeferredValue<\/code> hook’u, bir de\u011ferin g\u00fcncellenmesini belirli bir s\u00fcre geciktirebilir. Bu, aray\u00fcz\u00fcn s\u00fcrekli g\u00fcncellenmesini \u00f6nleyerek performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00d6rne\u011fin, kullan\u0131c\u0131 bir arama kutusuna metin yazarken, her karakter de\u011fi\u015fikli\u011fi i\u00e7in aray\u00fcz\u00fcn g\u00fcncellenmesi yerine, useDeferredValue<\/code> ile bu g\u00fcncellemeyi bir s\u00fcre erteleyebilir ve yaln\u0131zca kullan\u0131c\u0131 yazmay\u0131 b\u0131rakt\u0131ktan sonra aray\u00fcz\u00fc g\u00fcncelleyebilirsiniz. Bu sayede, gereksiz render i\u015flemlerinin \u00f6n\u00fcne ge\u00e7mi\u015f olursunuz.<\/p>\n\nimport { useDeferredValue } from 'react';\n\nfunction MyComponent() {\n const [value, setValue] = useState('');\n const deferredValue = useDeferredValue(value, { timeoutMs: 300 }); \/\/ 300ms gecikme\n\n return (\n <div>\n <input type=\"text\" value={value} onChange={e => setValue(e.target.value)} \/>\n <p>Gecikmeli De\u011fer: {deferredValue}<\/p>\n <\/div>\n );\n}\n<\/code><\/pre>\ntimeoutMs<\/code> parametresi ile gecikme s\u00fcresini 300 milisaniye olarak ayarlad\u0131k. Kullan\u0131c\u0131 yazmaya devam etti\u011fi s\u00fcrece, aray\u00fcz deferredValue<\/code>‘nin de\u011ferini kullanarak g\u00fcncellenir ve bu g\u00fcncellemeler 300 milisaniye geciktirilir. Kullan\u0131c\u0131 yazmay\u0131 b\u0131rakt\u0131\u011f\u0131nda ise, value<\/code> ile deferredValue<\/code> ayn\u0131 olur ve g\u00fcncelleme an\u0131nda ger\u00e7ekle\u015fir.<\/p>\nuseTransition: S\u0131ral\u0131 Ge\u00e7i\u015fler<\/h2>\n
useTransition<\/code> hook’u, uzun s\u00fcren i\u015flemleri arka planda \u00e7al\u0131\u015ft\u0131r\u0131rken, aray\u00fcz\u00fcn donmas\u0131n\u0131 engeller. Bu hook, bir i\u015flev al\u0131r ve bu i\u015flevin \u00e7al\u0131\u015fmas\u0131n\u0131 bir “ba\u015flat\u0131c\u0131” ile tetikler. \u0130\u015flem \u00e7al\u0131\u015f\u0131rken, bir y\u00fcklenme g\u00f6stergesi veya benzeri bir UI eleman\u0131 g\u00f6sterilebilir. \u0130\u015flem tamamland\u0131\u011f\u0131nda ise aray\u00fcz g\u00fcncellenir. Bu sayede, kullan\u0131c\u0131lar i\u015flem tamamlanana kadar aray\u00fcz\u00fcn donmad\u0131\u011f\u0131n\u0131 g\u00f6r\u00fcr ve daha ak\u0131c\u0131 bir deneyim ya\u015farlar.<\/p>\n\nimport { useTransition } from 'react';\n\nfunction MyComponent() {\n const [isPending, startTransition] = useTransition();\n const [data, setData] = useState([]);\n\n const fetchData = () => {\n startTransition(() => {\n \/\/ Uzun s\u00fcren i\u015flem (\u00f6rne\u011fin, API \u00e7a\u011fr\u0131s\u0131)\n fetch('\/api\/data')\n .then(res => res.json())\n .then(data => setData(data));\n });\n };\n\n return (\n <div>\n <button onClick={fetchData}>Verileri Y\u00fckle<\/button>\n {isPending && <p>Y\u00fckleniyor...<\/p>}\n {data.map(item => <p key={item.id}>{item.name}<\/p>)}\n <\/div>\n );\n}\n<\/code><\/pre>\nfetchData<\/code> fonksiyonu, startTransition<\/code> ile sarmalanm\u0131\u015ft\u0131r. Bu, veri y\u00fckleme i\u015fleminin arka planda \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar ve isPending<\/code> de\u011fi\u015fkeni ile y\u00fcklenme durumunu takip edebiliriz. Y\u00fcklenirken bir “Y\u00fckleniyor…” mesaj\u0131 g\u00f6sterilir ve i\u015flem tamamland\u0131\u011f\u0131nda data g\u00fcncellenir.<\/p>\nSonu\u00e7<\/h2>\n
useDeferredValue<\/code> ve useTransition<\/code>, React uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilecek g\u00fc\u00e7l\u00fc hook’lard\u0131r. \u00d6zellikle b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015f\u0131rken veya kullan\u0131c\u0131 etkile\u015fimlerinin yo\u011fun oldu\u011fu uygulamalarda, bu hook’lar\u0131 kullanarak kullan\u0131c\u0131 deneyimini iyile\u015ftirebilir ve uygulaman\u0131z\u0131n daha h\u0131zl\u0131 ve daha duyarl\u0131 olmas\u0131n\u0131 sa\u011flayabilirsiniz. Daha fazla bilgi ve \u00f6rnek i\u00e7in buraya<\/a> bakabilirsiniz. Ayr\u0131ca, React performans optimizasyonu hakk\u0131nda daha fazla bilgi edinmek i\u00e7in kendi sitemi fatihsoysal.com<\/a>‘u ziyaret edebilirsiniz.<\/p>\n