Modern web uygulamalar\u0131, kullan\u0131c\u0131lar\u0131na zengin ve dinamik aray\u00fczler sunarken, genellikle b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015fmak zorunda kal\u0131r. Bu veri k\u00fcmeleri, \u00f6zellikle listeler veya tablolar halinde sunuldu\u011funda, uygulama performans\u0131n\u0131 ciddi \u015fekilde etkileyebilir. Binlerce, hatta on binlerce \u00f6\u011feden olu\u015fan bir listeyi do\u011frudan DOM’a (Document Object Model) render etmek, taray\u0131c\u0131n\u0131n kaynaklar\u0131n\u0131 a\u015f\u0131r\u0131 t\u00fcketerek yava\u015flamaya, donmalara ve k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine yol a\u00e7abilir. \u0130\u015fte tam bu noktada sanalizasyon (virtualization) veya pencereleme (windowing) teknikleri devreye girer ve Bu kapsaml\u0131 makalede, Web uygulamalar\u0131nda performans, kullan\u0131c\u0131 memnuniyetinin temel ta\u015flar\u0131ndan biridir. \u00d6zellikle tek sayfa uygulamalar\u0131 (SPA’lar) ve veri yo\u011fun aray\u00fczler geli\u015ftirirken, performans darbo\u011fazlar\u0131 ka\u00e7\u0131n\u0131lmaz hale gelebilir. B\u00fcy\u00fck listeler, bu darbo\u011fazlar\u0131n en yayg\u0131n kaynaklar\u0131ndan biridir. Peki, neden b\u00fcy\u00fck listeler performans\u0131 olumsuz etkiler?<\/p>\n Bir React uygulamas\u0131nda, her bir liste \u00f6\u011fesi genellikle kendi bile\u015fenini temsil eder ve bu bile\u015fenler DOM’a render edilir. 10.000 \u00f6\u011felik bir liste d\u00fc\u015f\u00fcn\u00fcn:<\/p>\n * DOM Manip\u00fclasyonu:<\/strong> Taray\u0131c\u0131n\u0131n 10.000’den fazla DOM d\u00fc\u011f\u00fcm\u00fc olu\u015fturmas\u0131, g\u00fcncellemesi ve y\u00f6netmesi gerekir. Bu i\u015flemler, \u00f6zellikle her kayd\u0131rma veya veri g\u00fcncellemesinde, \u00f6nemli CPU zaman\u0131 ve bellek t\u00fcketimi anlam\u0131na gelir. Bu sorunlar\u0131 \u00e7\u00f6zmek i\u00e7in sanalizasyon ad\u0131 verilen bir teknik kullan\u0131l\u0131r. Sanalizasyon, “pencereleme” olarak da bilinir, b\u00fcy\u00fck listelerin performans sorunlar\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in kullan\u0131lan temel bir optimizasyon tekni\u011fidir. Bu tekni\u011fin arkas\u0131ndaki ana fikir basittir: Sadece o an kullan\u0131c\u0131n\u0131n ekran\u0131nda g\u00f6r\u00fcnen (veya \u00e7ok az bir tampon b\u00f6lgeyle g\u00f6r\u00fcn\u00fcr hale gelmek \u00fczere olan) \u00f6\u011feleri render et.<\/strong> Geri kalan \u00f6\u011feler DOM’a eklenmez, dolay\u0131s\u0131yla taray\u0131c\u0131n\u0131n i\u015f y\u00fck\u00fc b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azal\u0131r.<\/p>\n Sanalizasyonun \u00e7al\u0131\u015fma prensibi ad\u0131mlar halinde \u015f\u00f6yle \u00f6zetlenebilir:<\/p>\n 1. G\u00f6r\u00fcn\u00fcm Alan\u0131n\u0131n Tespiti:<\/strong> K\u00fct\u00fcphane, listenin i\u00e7inde bulundu\u011fu kapsay\u0131c\u0131 eleman\u0131n (viewport) boyutunu ve kayd\u0131rma pozisyonunu s\u00fcrekli olarak izler. Kurulum tamamland\u0131ktan sonra, * Her iki bile\u015fen de benzer temel prop’lar\u0131 payla\u015f\u0131r:<\/p>\n * \u015eimdi basit bir Bu \u00f6rnekte:<\/p>\n * Bu kurulum ile, sadece birka\u00e7 \u00f6\u011fe DOM’a render edilirken, kullan\u0131c\u0131 1000 \u00f6\u011felik bir listede sorunsuz bir \u015fekilde kayd\u0131rma yapabilir.<\/p>\n Kullan\u0131m Senaryolar\u0131:<\/strong><\/p>\n * Veri Tablolar\u0131:<\/strong> T\u00fcm sat\u0131rlar\u0131n ayn\u0131 y\u00fcksekli\u011fe sahip oldu\u011fu tablolar. \u00d6nemli Prop:<\/strong><\/p>\n * \u00d6rnek Kod: Yatay Liste<\/strong><\/p>\n Bu \u00f6rnekte, FixedSizeGrid:<\/strong><\/p>\n Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda, listelerdeki t\u00fcm \u00f6\u011felerin ayn\u0131 boyutta olmas\u0131 nadirdir. \u00d6rne\u011fin, bir sohbet uygulamas\u0131ndaki mesajlar farkl\u0131 uzunluklarda olabilir, bir haber ak\u0131\u015f\u0131ndaki makaleler farkl\u0131 resimler ve metin i\u00e7erikleri nedeniyle farkl\u0131 y\u00fcksekliklere sahip olabilir. Bu gibi durumlarda Bu \u00f6rnekte, Performans Etkileri ve Optimizasyon:<\/strong><\/p>\n * \u00d6nbellekleme (Caching):<\/strong> Genellikle, react-window<\/code> bu alandaki en pop\u00fcler ve etkili k\u00fct\u00fcphanelerden biridir.<\/p>\nreact-window<\/code>‘un ne oldu\u011funu, neden bu kadar \u00f6nemli oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve uygulamalar\u0131n\u0131zda b\u00fcy\u00fck listeleri verimli bir \u015fekilde y\u00f6netmek i\u00e7in nas\u0131l kullanabilece\u011finizi derinlemesine inceleyece\u011fiz. Temel kullan\u0131m\u0131ndan geli\u015fmi\u015f senaryolara, optimizasyon tekniklerinden birlikte kullan\u0131labilecek di\u011fer k\u00fct\u00fcphanelere kadar her y\u00f6n\u00fcyle react-window<\/code>‘u ele alaca\u011f\u0131z.<\/p>\nNeden react-window’a \u0130htiya\u00e7 Duyar\u0131z?<\/h3>\n
\n* Bellek T\u00fcketimi:<\/strong> Her bir DOM d\u00fc\u011f\u00fcm\u00fc ve onunla ili\u015fkili JavaScript nesneleri (olay dinleyicileri, stil bilgileri vb.) bellekte yer kaplar. B\u00fcy\u00fck listeler, y\u00fczlerce megabayt belle\u011fi kolayca t\u00fcketebilir, bu da \u00f6zellikle mobil cihazlarda veya d\u00fc\u015f\u00fck \u00f6zellikli makinelerde uygulamalar\u0131n \u00e7\u00f6kmesine neden olabilir.
\n* Layout ve Paint \u0130\u015flemleri:<\/strong> Taray\u0131c\u0131n\u0131n, t\u00fcm bu \u00f6\u011felerin konumunu ve stilini hesaplamas\u0131 (layout) ve ard\u0131ndan ekrana \u00e7izmesi (paint) gerekir. Bu i\u015flemler, liste b\u00fcy\u00fcd\u00fck\u00e7e katlanarak artar ve ak\u0131c\u0131 kayd\u0131rma deneyimini engeller.
\n* JavaScript Y\u00fcr\u00fctme:<\/strong> React’in sanal DOM fark\u0131 alma (diffing) ve uzla\u015ft\u0131rma (reconciliation) s\u00fcre\u00e7leri bile b\u00fcy\u00fck listelerde yava\u015flayabilir, \u00e7\u00fcnk\u00fc t\u00fcm \u00f6\u011feler i\u00e7in prop kar\u015f\u0131la\u015ft\u0131rmalar\u0131 yap\u0131lmas\u0131 gerekir.<\/p>\nreact-window<\/code>, React ekosisteminde bu tekni\u011fi uygulayan, hafif ve h\u0131zl\u0131 bir k\u00fct\u00fcphanedir.<\/p>\nSanalizasyon (Virtualization) Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n
\n2. G\u00f6r\u00fcn\u00fcr \u00d6\u011felerin Hesaplanmas\u0131:<\/strong> Bu bilgilere dayanarak, hangi liste \u00f6\u011felerinin g\u00f6r\u00fcn\u00fcm alan\u0131na girdi\u011fini veya girmek \u00fczere oldu\u011funu (genellikle bir “overscan” veya tampon b\u00f6lge ile) hesaplar.
\n3. Dinamik Render:<\/strong> Sadece bu hesaplanan g\u00f6r\u00fcn\u00fcr \u00f6\u011feler DOM’a eklenir ve render edilir. G\u00f6r\u00fcn\u00fcm alan\u0131 d\u0131\u015f\u0131ndaki \u00f6\u011feler DOM’dan kald\u0131r\u0131l\u0131r.
\n4. Bo\u015fluk B\u0131rakma (Placeholder):<\/strong> G\u00f6r\u00fcn\u00fcr olmayan \u00f6\u011felerin kaplayaca\u011f\u0131 toplam alan\u0131 korumak i\u00e7in, listenin ba\u015f\u0131nda ve sonunda uygun y\u00fckseklikte (dikey listeler i\u00e7in) veya geni\u015flikte (yatay listeler i\u00e7in) bo\u015f DOM elemanlar\u0131 (genellikle bir div<\/code>) olu\u015fturulur. Bu, kayd\u0131rma \u00e7ubu\u011funun do\u011fru boyutta olmas\u0131n\u0131 ve kullan\u0131c\u0131n\u0131n listenin tamam\u0131 \u00fczerinde kayd\u0131r\u0131yormu\u015f gibi hissetmesini sa\u011flar.
\n5. \u00d6\u011fe Yeniden Kullan\u0131m\u0131:<\/strong> Kullan\u0131c\u0131 kayd\u0131rd\u0131\u011f\u0131nda, g\u00f6r\u00fcn\u00fcm alan\u0131ndan \u00e7\u0131kan \u00f6\u011feler DOM’dan tamamen kald\u0131r\u0131lmak yerine, yeni g\u00f6r\u00fcn\u00fcm alan\u0131na giren \u00f6\u011feler i\u00e7in yeniden kullan\u0131l\u0131r. Bu, DOM manip\u00fclasyonunun maliyetini daha da azalt\u0131r.<\/p>\nreact-window<\/code>, bu mekanizmay\u0131 React bile\u015fenleri d\u00fcnyas\u0131na ta\u015f\u0131r. Kendisinden \u00f6nce gelen react-virtualized<\/code>‘a g\u00f6re daha k\u00fc\u00e7\u00fck bir boyuta ve daha basit bir API’ye sahiptir, \u00e7\u00fcnk\u00fc sadece listeleme ve \u0131zgara (grid) sanalizasyonuna odaklanm\u0131\u015ft\u0131r.<\/p>\nreact-window’un Temelleri: Kurulum ve \u0130lk Ad\u0131mlar<\/h3>\n
react-window<\/code>‘u projenize dahil etmek olduk\u00e7a basittir. \u00d6ncelikle, k\u00fct\u00fcphaneyi projenize kurman\u0131z gerekir:<\/p>\nnpm install react-window\nveya<\/h2>\nyarn add react-window<\/code><\/pre>\n
react-window<\/code>‘un temel bile\u015fenlerini kullanmaya ba\u015flayabilirsiniz. K\u00fct\u00fcphane iki ana liste bile\u015feni sunar:<\/p>\nFixedSizeList<\/code>: T\u00fcm \u00f6\u011felerin sabit bir y\u00fcksekli\u011fe (dikey listeler i\u00e7in) veya geni\u015fli\u011fe (yatay listeler i\u00e7in) sahip oldu\u011fu durumlar i\u00e7in.
\n* VariableSizeList<\/code>: \u00d6\u011felerin de\u011fi\u015fken y\u00fcksekli\u011fe veya geni\u015fli\u011fe sahip oldu\u011fu durumlar i\u00e7in.<\/p>\nheight<\/code>: Listenin g\u00f6r\u00fcnen y\u00fcksekli\u011fi (piksel cinsinden).
\n* width<\/code>: Listenin g\u00f6r\u00fcnen geni\u015fli\u011fi (piksel cinsinden).
\n* itemCount<\/code>: Listedeki toplam \u00f6\u011fe say\u0131s\u0131.
\n* children<\/code>: Her bir liste \u00f6\u011fesini render edecek bir fonksiyon (render prop). Bu fonksiyona index<\/code> (\u00f6\u011fenin dizini) ve style<\/code> (\u00f6\u011fenin konumunu belirleyen stil nesnesi) prop’lar\u0131 iletilir.
\n* itemData<\/code> (iste\u011fe ba\u011fl\u0131): Liste \u00f6\u011felerine aktar\u0131lacak herhangi bir ek veri. Performans optimizasyonu i\u00e7in \u00f6nemlidir.<\/p>\nFixedSizeList<\/code> \u00f6rne\u011fi ile ba\u015flayal\u0131m:<\/p>\nimport React from 'react';\nimport { FixedSizeList } from 'react-window';\n\nconst Row = ({ index, style }) => (\n FixedSizeList<\/code> bile\u015feni, 400 piksel y\u00fcksekli\u011finde ve 600 piksel geni\u015fli\u011finde bir alan\u0131 kaplar.
\n* itemCount={1000}<\/code> ile 1000 adet liste \u00f6\u011fesi oldu\u011funu belirtiriz.
\n* itemSize={50}<\/code> ile her bir \u00f6\u011fenin y\u00fcksekli\u011finin 50 piksel oldu\u011funu tan\u0131mlar\u0131z.
\n* Row<\/code> bile\u015feni, FixedSizeList<\/code>‘in children<\/code> prop’una ge\u00e7ilen bir render fonksiyonudur. react-window<\/code> bu fonksiyona index<\/code> (hangi \u00f6\u011fenin render edildi\u011fini belirtir) ve style<\/code> (\u00f6\u011fenin DOM’daki do\u011fru konumunu ve boyutunu ayarlayan stil) prop’lar\u0131n\u0131 iletir. Bu style<\/code> prop’unu kesinlikle \u00f6\u011fenize uygulamal\u0131s\u0131n\u0131z, aksi takdirde sanalizasyon \u00e7al\u0131\u015fmaz!<\/strong><\/p>\nFixedSizeList: Sabit Boyutlu \u00d6\u011feler \u0130\u00e7in<\/h3>\n
FixedSizeList<\/code>, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, listedeki t\u00fcm \u00f6\u011felerin ayn\u0131 y\u00fcksekli\u011fe (dikey listeler i\u00e7in) veya geni\u015fli\u011fe (yatay listeler i\u00e7in) sahip oldu\u011fu senaryolar i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu, react-window<\/code>‘un en basit ve en performansl\u0131 kullan\u0131m \u015feklidir, \u00e7\u00fcnk\u00fc k\u00fct\u00fcphane her bir \u00f6\u011fenin konumunu ve boyutunu kolayca hesaplayabilir.<\/p>\n
\n* \u00dcr\u00fcn Listeleri:<\/strong> Her \u00fcr\u00fcn kart\u0131n\u0131n sabit bir boyuta sahip oldu\u011fu e-ticaret sitelerindeki listeler.
\n* Ayarlar Men\u00fcleri:<\/strong> Sabit y\u00fckseklikteki men\u00fc \u00f6\u011feleri.
\n* Basit Mesaj Listeleri:<\/strong> T\u00fcm mesajlar\u0131n ayn\u0131 y\u00fcksekli\u011fe sahip oldu\u011fu sohbet uygulamalar\u0131.<\/p>\nitemSize<\/code>: Bu prop, bir say\u0131 de\u011feri al\u0131r ve her bir \u00f6\u011fenin piksel cinsinden boyutunu (dikey listeler i\u00e7in y\u00fckseklik, yatay listeler i\u00e7in geni\u015flik) belirtir. Bu de\u011fer, react-window<\/code>‘un sanal kayd\u0131rma mekanizmas\u0131n\u0131 do\u011fru bir \u015fekilde olu\u015fturmas\u0131 i\u00e7in kritik \u00f6neme sahiptir.<\/p>\nFixedSizeList<\/code> varsay\u0131lan olarak dikey listeler olu\u015fturur. Yatay bir liste olu\u015fturmak i\u00e7in layout=\"horizontal\"<\/code> prop’unu kullanman\u0131z yeterlidir. Bu durumda itemSize<\/code> prop’u \u00f6\u011felerin geni\u015fli\u011fini belirleyecektir.<\/p>\nimport React from 'react';\nimport { FixedSizeList } from 'react-window';\n\nconst Column = ({ index, style }) => (\n height<\/code> prop’u listenin y\u00fcksekli\u011fini (bu durumda sabittir), width<\/code> prop’u ise yatay olarak ne kadar alan kaplayaca\u011f\u0131n\u0131 belirtir. itemSize<\/code> bu sefer her bir s\u00fctunun geni\u015fli\u011fini temsil eder.<\/p>\nreact-window<\/code> ayr\u0131ca sabit boyutlu \u00f6\u011felerden olu\u015fan \u0131zgaralar (grid) i\u00e7in FixedSizeGrid<\/code> bile\u015fenini sunar. Bu bile\u015fen, hem sat\u0131r hem de s\u00fctun boyutlar\u0131n\u0131n sabit oldu\u011fu durumlarda kullan\u0131l\u0131r ve columnCount<\/code>, columnWidth<\/code>, rowCount<\/code>, rowHeight<\/code> gibi ek prop’lar al\u0131r. Kullan\u0131m mant\u0131\u011f\u0131 FixedSizeList<\/code>‘e benzerdir ancak iki boyutludur.<\/p>\nVariableSizeList: De\u011fi\u015fken Boyutlu \u00d6\u011feler \u0130\u00e7in<\/h3>\n
FixedSizeList<\/code> yetersiz kal\u0131r, \u00e7\u00fcnk\u00fc her \u00f6\u011fenin boyutunu \u00f6nceden bilmez ve sabit bir itemSize<\/code> de\u011feri atayamay\u0131z. \u0130\u015fte burada VariableSizeList<\/code> devreye girer.<\/p>\nVariableSizeList<\/code>, listedeki \u00f6\u011felerin farkl\u0131 boyutlara sahip olabilece\u011fi senaryolar i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu bile\u015fen, itemSize<\/code> prop’unu bir say\u0131 yerine bir fonksiyon olarak al\u0131r.<\/p>\nitemSize<\/code> Prop’u Fonksiyon Olarak:<\/strong><\/p>\nVariableSizeList<\/code> i\u00e7in itemSize<\/code> prop’u, index<\/code> parametresini alan ve o dizindeki \u00f6\u011fenin piksel cinsinden boyutunu d\u00f6nd\u00fcren bir fonksiyon olmal\u0131d\u0131r:<\/p>\nimport React from 'react';\nimport { VariableSizeList } from 'react-window';\n\n\/\/ \u00d6rnek olarak, her \u00f6\u011fenin y\u00fcksekli\u011fi rastgele olsun\nconst getItemSize = index => (index % 3 === 0 ? 75 : 50); \/\/ Baz\u0131 \u00f6\u011feler 75px, baz\u0131lar\u0131 50px\n\nconst Row = ({ index, style }) => (\n getItemSize<\/code> fonksiyonu her bir \u00f6\u011fenin dizinine g\u00f6re farkl\u0131 bir y\u00fckseklik d\u00f6nd\u00fcr\u00fcr. react-window<\/code>, her \u00f6\u011fenin konumunu ve boyutunu dinamik olarak hesaplamak i\u00e7in bu fonksiyonu kullan\u0131r.<\/p>\nitemSize<\/code> fonksiyonunun her render’da veya her kayd\u0131rma olay\u0131nda \u00e7a\u011fr\u0131lmas\u0131, \u00f6zellikle \u00e7ok b\u00fcy\u00fck listelerde performans sorunlar\u0131na yol a\u00e7abilir. E\u011fer \u00f6\u011fe boyutlar\u0131 de\u011fi\u015firse veya listenin i\u00e7eri\u011fi g\u00fcncellenirse, react-window<\/code>‘un bu boyutlar\u0131 yeniden hesaplamas\u0131 gerekir.<\/p>\ngetItemSize<\/code> fonksiyonunun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011ferler \u00f6nbelle\u011fe al\u0131n\u0131r. E\u011fer \u00f6\u011fe boyutlar\u0131 dinamik olarak de\u011fi\u015fmiyorsa (yani, bir kez hesapland\u0131ktan sonra sabit kal\u0131yorsa), bu de\u011ferleri bir dizi veya harita i\u00e7inde saklamak ve sadece gerekti\u011finde g\u00fcncellemek performans\u0131 art\u0131r\u0131r.
\n* resetAfterIndex<\/code> Metodu:<\/strong> VariableSizeList<\/code>‘in bir resetAfterIndex<\/code> metodu vard\u0131r. Bu metot, listenin boyutlar\u0131n\u0131n belirli bir dizinden sonra ge\u00e7ersiz oldu\u011funu ve yeniden hesaplanmas\u0131 gerekti\u011fini belirtmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir \u00f6\u011fenin i\u00e7eri\u011fi de\u011fi\u015fti\u011finde ve y\u00fcksekli\u011fi farkl\u0131la\u015ft\u0131\u011f\u0131nda, bu metodu \u00e7a\u011f\u0131rarak k\u00fct\u00fcphaneyi bilgilendirebilirsiniz. Bu metot, VariableSizeList<\/code> bile\u015feninin bir ref<\/code>‘i arac\u0131l\u0131\u011f\u0131yla \u00e7a\u011fr\u0131l\u0131r.<\/p>\nimport React, { useRef, useCallback, useState } from 'react';\nimport { VariableSizeList } from 'react-window';\n\n\/\/ Her \u00f6\u011fenin y\u00fcksekli\u011fini dinamik olarak belirleyen bir fonksiyon\nconst itemHeights = new Array(1000)\n .fill(true)\n .map(() => 25 + Math.round(Math.random() * 50)); \/\/ Rastgele y\u00fckseklikler\n\nconst getItemSize = index => itemHeights[index];\n\nconst Row = ({ index, style }) => (\n