React Native ile mobil uygulama geli\u015ftirirken performans, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir fakt\u00f6rd\u00fcr. Uygulaman\u0131z ne kadar h\u0131zl\u0131 ve ak\u0131c\u0131 \u00e7al\u0131\u015f\u0131rsa, kullan\u0131c\u0131lar da o kadar memnun kal\u0131r. Bu makalede, React Native’in rendering (g\u00f6r\u00fcnt\u00fcleme) i\u015f ak\u0131\u015f\u0131n\u0131 derinlemesine inceleyecek ve uygulaman\u0131z\u0131n performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in kullanabilece\u011finiz etkili y\u00f6ntemleri ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. \u00d6zellikle karma\u015f\u0131k listeler, animasyonlar ve yo\u011fun veri i\u015fleme senaryolar\u0131nda performans d\u00fc\u015f\u00fc\u015flerinin \u00f6n\u00fcne nas\u0131l ge\u00e7ebilece\u011finizi ke\u015ffedece\u011fiz.<\/p>\n
React Native’de rendering s\u00fcreci, uygulaman\u0131z\u0131n kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (UI) nas\u0131l olu\u015fturuldu\u011funu ve g\u00fcncellendi\u011fini ifade eder. Temelde React’in sanal DOM (Document Object Model) prensibine dayan\u0131r, ancak mobil platformlar i\u00e7in optimize edilmi\u015ftir. React Native, JavaScript kodunuzu al\u0131r ve bunu native platform bile\u015fenlerine (iOS i\u00e7in UIKit, Android i\u00e7in Android UI) d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu d\u00f6n\u00fc\u015f\u00fcm, “Bridge” ad\u0131 verilen bir aray\u00fcz \u00fczerinden ger\u00e7ekle\u015fir. JavaScript thread’i, UI thread’inden ayr\u0131 \u00e7al\u0131\u015f\u0131r. Bu ayr\u0131m, JavaScript’te yo\u011fun i\u015flemler yap\u0131ld\u0131\u011f\u0131nda bile UI’\u0131n donmas\u0131n\u0131 engeller, ancak ayn\u0131 zamanda iki thread aras\u0131ndaki ileti\u015fimde bir darbo\u011faz olu\u015fturabilir. Bu nedenle, rendering s\u00fcrecini optimize etmek, bu k\u00f6pr\u00fcdeki ileti\u015fimi en aza indirmeyi ve gereksiz g\u00fcncellemeleri \u00f6nlemeyi hedefler.<\/p>\n
Rendering’in iki ana a\u015famas\u0131 vard\u0131r: ilk render (initial render) ve re-render (yeniden render). \u0130lk render, bile\u015fenlerin ekrana ilk kez \u00e7izildi\u011fi zamand\u0131r. Re-render ise, bile\u015fenin state’i (durumu) veya props’lar\u0131 (\u00f6zellikleri) de\u011fi\u015fti\u011finde tetiklenir. Amac\u0131m\u0131z, gereksiz re-render’lar\u0131 \u00f6nleyerek performans\u0131 art\u0131rmakt\u0131r. Bir bile\u015fenin re-render olmas\u0131 i\u00e7in, state veya props’lar\u0131ndan birinin de\u011fi\u015fmesi gerekir. Ancak bazen, bu de\u011fi\u015fiklikler do\u011frudan bile\u015feni etkilemese bile re-render tetiklenebilir. \u0130\u015fte bu noktada optimizasyon teknikleri devreye girer.<\/p>\n
React Native’in rendering mimarisi, JavaScript kodu ile native UI aras\u0131nda bir k\u00f6pr\u00fc g\u00f6revi g\u00f6ren bir \u201cBridge\u201d \u00fczerine kuruludur. JavaScript thread\u2019i, uygulaman\u0131z\u0131n mant\u0131\u011f\u0131n\u0131 ve UI g\u00fcncellemelerini y\u00f6netir. UI thread\u2019i ise, ekrandaki g\u00f6rsel \u00f6\u011felerin \u00e7izilmesinden sorumludur. Bu iki thread\u2019in ayr\u0131 \u00e7al\u0131\u015fmas\u0131, JavaScript taraf\u0131nda yo\u011fun bir i\u015flem oldu\u011funda bile uygulaman\u0131n donmas\u0131n\u0131 engellemeye yard\u0131mc\u0131 olur. Ancak, bu k\u00f6pr\u00fc \u00fczerinden yap\u0131lan veri aktar\u0131m\u0131 ve ileti\u015fim, performans darbo\u011fazlar\u0131na yol a\u00e7abilir. Bu nedenle, rendering s\u00fcrecini optimize etmek, bu k\u00f6pr\u00fcdeki veri ak\u0131\u015f\u0131n\u0131 en aza indirmek ve gereksiz g\u00fcncellemeleri engellemekle yak\u0131ndan ilgilidir.<\/p>\n
Her bile\u015fen, bir kez olu\u015fturulduktan sonra, state’i veya props’lar\u0131 de\u011fi\u015fti\u011finde “re-render” olur. Bu, bile\u015fenin tekrar \u00e7izilmesi anlam\u0131na gelir. Temel hedefimiz, yaln\u0131zca ger\u00e7ekten gerekli oldu\u011funda re-render i\u015flemini tetiklemektir. Gereksiz yere re-render olan bile\u015fenler, hem CPU kaynaklar\u0131n\u0131 bo\u015fa harcar hem de uygulaman\u0131n genel performans\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr. Bu durum, \u00f6zellikle karma\u015f\u0131k UI’lar veya s\u0131k g\u00fcncellenen veri ak\u0131\u015flar\u0131nda daha belirgin hale gelir.<\/p>\n
React Native uygulamalar\u0131nda performans sorunlar\u0131n\u0131n bir\u00e7ok farkl\u0131 kayna\u011f\u0131 olabilir. En yayg\u0131n olanlar\u0131ndan biri, gereksiz re-render’lard\u0131r. Bir bile\u015fenin state’i veya props’u de\u011fi\u015fti\u011finde, React bu bile\u015fenin ve onun alt bile\u015fenlerinin g\u00fcncellenmesi gerekti\u011fini d\u00fc\u015f\u00fcn\u00fcr. Ancak bazen, props’lar veya state’teki de\u011fi\u015fiklikler asl\u0131nda UI’\u0131 do\u011frudan etkilemez. Bu durumda bile, bile\u015fenler yeniden render edilir ve bu da performans kayb\u0131na yol a\u00e7ar. \u00d6zellikle b\u00fcy\u00fck ve i\u00e7 i\u00e7e ge\u00e7mi\u015f bile\u015fen a\u011fa\u00e7lar\u0131nda, tek bir gereksiz re-render bile zincirleme re-render’lara neden olabilir.<\/p>\n
Bir di\u011fer \u00f6nemli sorun, b\u00fcy\u00fck ve karma\u015f\u0131k listelerin i\u015flenmesidir. E\u011fer bir listede y\u00fczlerce veya binlerce \u00f6\u011fe varsa ve bu \u00f6\u011felerin her biri karma\u015f\u0131k bir yap\u0131ya sahipse, t\u00fcm listeyi her seferinde yeniden render etmek ciddi performans sorunlar\u0131na yol a\u00e7ar. Ekran\u0131n yaln\u0131zca g\u00f6r\u00fcn\u00fcr k\u0131sm\u0131ndaki \u00f6\u011felerin render edilmesi ve kayd\u0131rma s\u0131ras\u0131nda yeni \u00f6\u011felerin dinamik olarak olu\u015fturulmas\u0131 gerekir. Bu, \u201cVirtualization\u201d (sanal eri\u015fim) olarak adland\u0131r\u0131l\u0131r ve React Native’de Bellek s\u0131z\u0131nt\u0131lar\u0131 (memory leaks) da performans d\u00fc\u015f\u00fc\u015flerinin ba\u015fka bir yayg\u0131n nedenidir. E\u011fer bir bile\u015fen DOM’dan kald\u0131r\u0131ld\u0131\u011f\u0131nda bellekteki referanslar\u0131n\u0131 d\u00fczg\u00fcn bir \u015fekilde temizlemezse, bu bellekte kal\u0131r ve zamanla uygulaman\u0131n bellek kullan\u0131m\u0131n\u0131 art\u0131r\u0131r. Bu durum, \u00f6zellikle uzun s\u00fcre \u00e7al\u0131\u015fan uygulamalarda veya s\u0131k s\u0131k ekranlar aras\u0131nda ge\u00e7i\u015f yap\u0131ld\u0131\u011f\u0131nda belirginle\u015fir. Bu s\u0131z\u0131nt\u0131lar, uygulaman\u0131n yava\u015flamas\u0131na, \u00e7\u00f6kmesine ve genel olarak karars\u0131z hale gelmesine neden olabilir.<\/p>\n Ayr\u0131ca, JavaScript thread’inde uzun s\u00fcren i\u015flemler de UI thread’ini bloke edebilir ve uygulaman\u0131n donmas\u0131na sebep olabilir. \u00d6rne\u011fin, b\u00fcy\u00fck bir veri setini i\u015flemek, karma\u015f\u0131k hesaplamalar yapmak veya a\u011fdan b\u00fcy\u00fck miktarda veri indirmek gibi i\u015flemler, UI’\u0131n yan\u0131t vermesini engelleyebilir. Bu t\u00fcr i\u015flemlerin arka planda veya ayr\u0131 bir thread’de yap\u0131lmas\u0131, performans\u0131n korunmas\u0131 a\u00e7\u0131s\u0131ndan hayati \u00f6nem ta\u015f\u0131r.<\/p>\n Son olarak, animasyonlar\u0131n verimsiz kullan\u0131m\u0131 da performans sorunlar\u0131na yol a\u00e7abilir. Karma\u015f\u0131k veya \u00e7ok say\u0131da animasyonun ayn\u0131 anda \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131, UI thread’ini yo\u011fun bir \u015fekilde me\u015fgul edebilir. React Native’in sundu\u011fu React Native’de gereksiz re-render’lar\u0131 \u00f6nlemenin en etkili yollar\u0131ndan biri \u00d6rne\u011fin, bir liste \u00f6\u011fesi bile\u015feni d\u00fc\u015f\u00fcnelim. E\u011fer bu liste \u00f6\u011fesinin i\u00e7eri\u011fi yaln\u0131zca d\u0131\u015far\u0131dan gelen <\/code><\/p>\n Burada Bir \u00f6rnekle a\u00e7\u0131klayal\u0131m: Diyelim ki bir bile\u015fende, gelen bir diziyi i\u015fleyerek yeni bir obje olu\u015fturuyorsunuz ve bu obje ba\u015fka bir yerde kullan\u0131l\u0131yor. E\u011fer bu dizi her render'da ayn\u0131 kal\u0131yorsa, her seferinde bu objeyi yeniden olu\u015fturmak gereksizdir. <\/code><\/p>\n Bu \u00f6rnekte, \u00d6rne\u011fin, bir butonun <\/code><\/p>\n Burada Bu \u00fc\u00e7 mekanizma \u2013 React Native'de b\u00fcy\u00fck veri k\u00fcmelerini g\u00f6r\u00fcnt\u00fclerken performans\u0131n en \u00e7ok etkilendi\u011fi alanlardan biri listelerdir. E\u011fer bir listede y\u00fczlerce, hatta binlerce \u00f6\u011fe varsa, t\u00fcm \u00f6\u011feleri tek seferde DOM'a eklemek uygulaman\u0131z\u0131 yava\u015flatabilir ve hatta \u00e7\u00f6kertme noktas\u0131na getirebilir. \u0130\u015fte tam bu noktada * \u00d6rnek bir <\/code><\/p>\n * <\/code> * * * * * <\/code><\/p>\n Ger\u00e7ek d\u00fcnya senaryolar\u0131:<\/p>\n 1. E-ticaret \u00dcr\u00fcn Listesi<\/strong>: Bir e-ticaret uygulamas\u0131nda binlerce \u00fcr\u00fcn g\u00f6steren bir liste d\u00fc\u015f\u00fcn\u00fcn. Her \u00fcr\u00fcn\u00fcn resmi, ad\u0131, fiyat\u0131 ve belki de k\u0131sa bir a\u00e7\u0131klamas\u0131 var. Bu durumda React Native'in mimarisinde, JavaScript kodu ve native UI kodlar\u0131 ayr\u0131 thread'lerde \u00e7al\u0131\u015f\u0131r. JavaScript thread'i uygulaman\u0131n mant\u0131\u011f\u0131n\u0131, state y\u00f6netimini ve UI g\u00fcncellemelerinin talep edilmesini y\u00f6netirken, UI thread'i (veya native thread'ler) bu talepleri al\u0131p ekrandaki g\u00f6rsel \u00f6\u011feleri \u00e7izer. Bu iki d\u00fcnya aras\u0131ndaki ileti\u015fim, \"Bridge\" ad\u0131 verilen bir mekanizma \u00fczerinden ger\u00e7ekle\u015fir. Geleneksel olarak, bu ileti\u015fim JSON mesajlar\u0131n\u0131n seri hale getirilip g\u00f6nderilmesiyle olurdu. Bu, \u00f6zellikle s\u0131k ve b\u00fcy\u00fck veri aktar\u0131mlar\u0131nda bir darbo\u011faz olu\u015fturabilir, \u00e7\u00fcnk\u00fc seri hale getirme ve tersine \u00e7evirme i\u015flemleri zaman al\u0131c\u0131d\u0131r.<\/p>\n Bu darbo\u011faz\u0131 a\u015fmak i\u00e7in React Native, JavaScript Interface (JSI)<\/strong> ad\u0131 verilen yeni ve daha verimli bir ileti\u015fim katman\u0131 geli\u015ftirmi\u015ftir. JSI, JavaScript ve native kodun do\u011frudan birbirini \u00e7a\u011f\u0131rmas\u0131na olanak tan\u0131r, JSON'a ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 ortadan kald\u0131r\u0131r ve ileti\u015fimi \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r. JSI, C++'ta yaz\u0131lm\u0131\u015f bir k\u00f6pr\u00fcd\u00fcr ve JavaScript motoru ile native platform aras\u0131nda daha d\u00fc\u015f\u00fck seviyeli bir eri\u015fim sa\u011flar. Bu, daha h\u0131zl\u0131 veri aktar\u0131m\u0131, daha az bellek kullan\u0131m\u0131 ve daha ak\u0131c\u0131 animasyonlar anlam\u0131na gelir.<\/p>\n JSI'n\u0131n getirdi\u011fi en \u00f6nemli yeniliklerden biri, Native Modules<\/strong>'lerin (native mod\u00fcller) ve UI Manager<\/strong>'\u0131n \u00e7al\u0131\u015fma \u015feklini de\u011fi\u015ftirmesidir. Geleneksel Bridge ile, bir JavaScript fonksiyonu bir native mod\u00fcl\u00fc \u00e7a\u011f\u0131rd\u0131\u011f\u0131nda, bu \u00e7a\u011fr\u0131 seri hale getirilir, Bridge \u00fczerinden g\u00f6nderilir, native tarafta al\u0131n\u0131r, tersine \u00e7evrilir ve \u00e7al\u0131\u015ft\u0131r\u0131l\u0131rd\u0131. JSI ile, bu \u00e7a\u011fr\u0131lar do\u011frudan yap\u0131l\u0131r. Bu, \u00f6zellikle performans a\u00e7\u0131s\u0131ndan kritik olan animasyonlar ve yo\u011fun veri g\u00fcncellemeleri i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r.<\/p>\n JSI'n\u0131n sundu\u011fu bir di\u011fer \u00f6nemli \u00f6zellik ise TurboModules<\/strong> ve Fabric<\/strong>'tir.<\/p>\n * TurboModules<\/strong>: Geleneksel native mod\u00fcllerin JSI \u00fczerinde yeniden tasarlanm\u0131\u015f halidir. JSI sayesinde daha verimli bir \u015fekilde y\u00fcklenirler ve \u00e7a\u011fr\u0131l\u0131rlar. TurboModules, native mod\u00fcllerin \"lazy loading\" (tembel y\u00fckleme) \u00f6zelli\u011fini de destekler, yani yaln\u0131zca ger\u00e7ekten ihtiya\u00e7 duyuldu\u011funda y\u00fcklenirler. Bu, uygulaman\u0131n ba\u015flang\u0131\u00e7 s\u00fcresini iyile\u015ftirebilir.<\/p>\n * Fabric<\/strong>: React Native'in yeni rendering engine'idir. Fabric, JSI \u00fczerine in\u015fa edilmi\u015ftir ve daha verimli, senkron ve paralel bir rendering s\u00fcreci sunar. Fabric ile, JavaScript ve native UI aras\u0131ndaki etkile\u015fim daha h\u0131zl\u0131 ve daha ak\u0131c\u0131 hale gelir. \u00d6rne\u011fin, animasyonlar art\u0131k JavaScript thread'ini bloke etmeden do\u011frudan native tarafta i\u015flenebilir. Bu, daha ak\u0131c\u0131 animasyonlar, daha iyi dokunma tepkileri ve genel olarak daha duyarl\u0131 bir kullan\u0131c\u0131 aray\u00fcz\u00fc anlam\u0131na gelir.<\/p>\n Peki, bu JSI, TurboModules ve Fabric'i bizim gibi geli\u015ftiriciler nas\u0131l kullan\u0131yor? Asl\u0131nda, \u00e7o\u011fu durumda do\u011frudan bu teknolojilerle u\u011fra\u015fmak zorunda de\u011filiz. React Native'in g\u00fcncel s\u00fcr\u00fcmleri bu yeni mimariyi varsay\u0131lan olarak kullan\u0131r veya ge\u00e7i\u015fi kolayla\u015ft\u0131r\u0131r. Ancak, bu teknolojilerin varl\u0131\u011f\u0131ndan haberdar olmak ve performans sorunlar\u0131yla kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131zda bu mimarinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 bilmek \u00f6nemlidir.<\/p>\n \u00d6rne\u011fin, Ger\u00e7ek d\u00fcnya senaryosu: Bir harita uygulamas\u0131nda kullan\u0131c\u0131y\u0131 takip eden bir animasyon d\u00fc\u015f\u00fcn\u00fcn. Eski Bridge mimarisiyle, her konum g\u00fcncellemesi i\u00e7in JavaScript'ten native'e veri g\u00f6nderilmesi ve ard\u0131ndan haritan\u0131n g\u00fcncellenmesi gerekirdi. Bu, \u00f6zellikle y\u00fcksek frekansl\u0131 g\u00fcncellemelerde tak\u0131lmalara neden olabilirdi. Fabric ve JSI ile, konum g\u00fcncellemeleri daha do\u011frudan ve verimli bir \u015fekilde i\u015flenebilir, bu da daha ak\u0131c\u0131 bir takip animasyonu sa\u011flar.<\/p>\n Kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan bak\u0131ld\u0131\u011f\u0131nda, JSI ve Fabric, uygulaman\u0131z\u0131n \"hissettirdi\u011fi\" performans\u0131 do\u011frudan etkiler. Daha h\u0131zl\u0131 tepki veren butonlar, ak\u0131c\u0131 kayd\u0131rmalar ve p\u00fcr\u00fczs\u00fcz animasyonlar, kullan\u0131c\u0131lar\u0131n uygulaman\u0131z\u0131 daha profesyonel ve keyifli bulmas\u0131n\u0131 sa\u011flar. Bu nedenle, React Native'in bu temel mimari de\u011fi\u015fikliklerini anlamak, daha iyi performansl\u0131 uygulamalar geli\u015ftirmek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n Performans optimizasyonunda bellek y\u00f6netimi, genellikle g\u00f6z ard\u0131 edilen ancak kritik bir konudur. React Native uygulamalar\u0131nda bellek s\u0131z\u0131nt\u0131lar\u0131 (memory leaks), zamanla uygulaman\u0131n bellek kullan\u0131m\u0131n\u0131 art\u0131rarak yava\u015flamas\u0131na, karars\u0131z hale gelmesine ve hatta \u00e7\u00f6kmesine neden olabilir. Bu nedenle, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek ve mevcut belle\u011fi verimli kullanmak, uygulaman\u0131n genel sa\u011fl\u0131\u011f\u0131 i\u00e7in hayati \u00f6nem ta\u015f\u0131r.<\/p>\n Bellek s\u0131z\u0131nt\u0131s\u0131, bir nesnenin art\u0131k kullan\u0131lmad\u0131\u011f\u0131 halde bellekte tutulmas\u0131 durumudur. React Native'de bu genellikle \u015fu senaryolarda ortaya \u00e7\u0131kar:<\/p>\n 1. Dinleyicilerin (Listeners) Temizlenmemesi<\/strong>: Bir bile\u015fen mount edildi\u011finde (ekrana eklendi\u011finde) bir olay dinleyicisi eklediyseniz ve bu bile\u015fen unmount edildi\u011finde (ekrandan kald\u0131r\u0131ld\u0131\u011f\u0131nda) bu dinleyiciyi temizlemezseniz, dinleyici bellekte kal\u0131r. Bu, \u00f6zellikle <\/code> 2. Zamanlay\u0131c\u0131lar\u0131n (Timers) Temizlenmemesi<\/strong>: <\/code><\/p>\n 3. Referanslar\u0131n (References) Temizlenmemesi<\/strong>: Bir bile\u015fen i\u00e7inde olu\u015fturulan ve referanslar\u0131 tutulan nesnelerin, art\u0131k ihtiya\u00e7 duyulmad\u0131\u011f\u0131nda serbest b\u0131rak\u0131lmas\u0131 gerekir. \u00d6zellikle karma\u015f\u0131k veri yap\u0131lar\u0131 veya global durum y\u00f6netimi kullan\u0131l\u0131yorsa bu \u00f6nemlidir.<\/p>\n 4. Detached DOM Elements (Ba\u011flant\u0131s\u0131z DOM \u00d6\u011feleri)<\/strong>: React Native'de bu durum, native UI \u00f6\u011felerinin bellekten d\u00fczg\u00fcn bir \u015fekilde kald\u0131r\u0131lmamas\u0131 anlam\u0131na gelebilir. Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 tespit etmek i\u00e7in React Native Debugger veya Flipper gibi ara\u00e7lar\u0131 kullanabilirsiniz. Bu ara\u00e7lar, uygulaman\u0131z\u0131n bellek kullan\u0131m\u0131n\u0131 izlemenize ve potansiyel s\u0131z\u0131nt\u0131lar\u0131 belirlemenize olanak tan\u0131r.<\/p>\n Bellek kullan\u0131m\u0131n\u0131 optimize etmek i\u00e7in genel ipu\u00e7lar\u0131:<\/strong><\/p>\n * Gereksiz Nesnelerden Ka\u00e7\u0131n\u0131n<\/strong>: Her render'da yeni nesneler veya diziler olu\u015fturmak yerine, Bellek s\u0131z\u0131nt\u0131lar\u0131, uygulaman\u0131z\u0131n gizli d\u00fc\u015fman\u0131d\u0131r. D\u00fczenli olarak bellek kullan\u0131m\u0131n\u0131 izlemek ve yukar\u0131da belirtilen temizlik prensiplerine uymak, uzun vadede daha kararl\u0131 ve performansl\u0131 bir uygulama elde etmenizi sa\u011flayacakt\u0131r.<\/p>\n Bu b\u00f6l\u00fcmde, React Native'de rendering ve performans optimizasyonunun ger\u00e7ek d\u00fcnyada nas\u0131l uyguland\u0131\u011f\u0131na dair iki vaka analizi sunaca\u011f\u0131z. Bu analizler, yukar\u0131da bahsedilen tekniklerin pratik uygulamalar\u0131n\u0131 ve kar\u015f\u0131la\u015f\u0131lan zorluklar\u0131 g\u00f6stermeyi ama\u00e7lamaktad\u0131r.<\/p>\n Senaryo<\/strong>: Bir finansal analiz uygulamas\u0131 geli\u015ftiriliyor. Uygulama, kullan\u0131c\u0131lara hisse senedi fiyatlar\u0131, grafikler, haber ak\u0131\u015flar\u0131 ve piyasa verileri gibi \u00e7ok say\u0131da dinamik veriyi ger\u00e7ek zamanl\u0131 olarak g\u00f6stermeli. Veri ak\u0131\u015f\u0131 olduk\u00e7a yo\u011fun ve s\u00fcrekli g\u00fcncelleniyor.<\/p>\n Sorunlar<\/strong>: \u00c7\u00f6z\u00fcmler ve Uygulanan Teknikler<\/strong>: Sonu\u00e7<\/strong>: Bu optimizasyonlar sayesinde, hisse senedi listesindeki kayd\u0131rma performans\u0131 %70'ten fazla artt\u0131. Ger\u00e7ek zamanl\u0131 veri g\u00fcncellemeleri daha az CPU kullan\u0131rken, uygulaman\u0131n genel yan\u0131t verme s\u00fcresi iyile\u015fti. Bellek s\u0131z\u0131nt\u0131lar\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azalt\u0131ld\u0131 ve uygulama daha kararl\u0131 hale geldi.<\/p>\n Senaryo<\/strong>: Bir sosyal medya uygulamas\u0131n\u0131n ana ak\u0131\u015f ekran\u0131. Kullan\u0131c\u0131lar g\u00f6nderileri kayd\u0131rabilir, be\u011fenebilir, yorum yapabilir ve payla\u015fabilir. G\u00f6nderiler metin, resim, video ve anket gibi \u00e7e\u015fitli i\u00e7erik t\u00fcrlerini bar\u0131nd\u0131rabilir.<\/p>\n Sorunlar<\/strong>: \u00c7\u00f6z\u00fcmler ve Uygulanan Teknikler<\/strong>:FlatList<\/code> ve SectionList<\/code> gibi bile\u015fenlerle sa\u011flan\u0131r. Ancak bu bile\u015fenlerin de do\u011fru yap\u0131land\u0131r\u0131lmamas\u0131 performans\u0131 olumsuz etkileyebilir.<\/p>\nAnimated<\/code> API’si veya react-native-reanimated<\/code> gibi k\u00fct\u00fcphaneler, animasyonlar\u0131 daha verimli hale getirmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Ancak bu ara\u00e7lar\u0131n do\u011fru ve optimize edilmi\u015f bir \u015fekilde kullan\u0131lmas\u0131, performans\u0131n korunmas\u0131 i\u00e7in kritiktir.<\/p>\nReact.memo<\/code> ve useMemo<\/code> ile Gereksiz Re-render’lar\u0131 Engellemek<\/h3>\nReact.memo<\/code> ve useMemo<\/code> hook’lar\u0131n\u0131 kullanmakt\u0131r. React.memo<\/code>, bir React bile\u015fenini saran bir y\u00fcksek dereceli bile\u015fendir (Higher-Order Component – HOC). Bu bile\u015fen, props’lar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece bile\u015fenin yeniden render edilmesini engeller. Yani, bir bile\u015fenin props’lar\u0131 ayn\u0131 kald\u0131\u011f\u0131 s\u00fcrece, React.memo o bile\u015feni tekrar render etmek yerine \u00f6nceki render edilen sonucunu kullan\u0131r. Bu, \u00f6zellikle ayn\u0131 props’larla s\u0131k s\u0131k render edilen veya render maliyeti y\u00fcksek olan bile\u015fenler i\u00e7in b\u00fcy\u00fck bir performans art\u0131\u015f\u0131 sa\u011flayabilir.<\/p>\ndata<\/code> prop’una ba\u011fl\u0131ysa ve bu data<\/code> prop’u de\u011fi\u015fmedi\u011fi s\u00fcrece liste \u00f6\u011fesinin kendisinin yeniden render edilmesine gerek yoksa, React.memo<\/code> kullanmak mant\u0131kl\u0131d\u0131r. Bunu \u015fu \u015fekilde uygulayabiliriz:<\/p>\nimport React from 'react';\n\nconst MyListItem = React.memo(({ item }) => {\n console.log('MyListItem render ediliyor'); \/\/ Bu log sadece item de\u011fi\u015fti\u011finde g\u00f6r\u00fcnecektir\n return (\n \/\/ Liste \u00f6\u011fesinin JSX'i\n MyListItem<\/code> bile\u015feni React.memo<\/code> ile sar\u0131lm\u0131\u015ft\u0131r. Bu sayede, FlatList<\/code> yeniden render olsa bile, item<\/code> prop'u de\u011fi\u015fmedi\u011fi s\u00fcrece MyListItem<\/code> yeniden render edilmeyecektir. Bu, \u00f6zellikle b\u00fcy\u00fck listelerde \u00f6nemli bir performans kazanc\u0131 sa\u011flar.<\/p>\nuseMemo<\/code> ise, hesaplama maliyeti y\u00fcksek olan de\u011ferleri memoize (\u00f6nbelle\u011fe alma) etmek i\u00e7in kullan\u0131lan bir React hook'udur. Bu hook, bir fonksiyonun sonucunu \u00f6nbelle\u011fe al\u0131r ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fmedi\u011fi s\u00fcrece fonksiyonu tekrar \u00e7al\u0131\u015ft\u0131rmaz. Bu, \u00f6zellikle nesnelerin veya dizilerin olu\u015fturulmas\u0131 gibi maliyetli i\u015flemler i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nuseMemo<\/code> ile bu i\u015flemi optimize edebiliriz:<\/p>\nimport React, { useMemo } from 'react';\n\nconst MyComponent = ({ dataArray }) => {\n const processedData = useMemo(() => {\n console.log('processedData hesaplan\u0131yor'); \/\/ Bu log sadece dataArray de\u011fi\u015fti\u011finde g\u00f6r\u00fcnecektir\n \/\/ Maliyetli i\u015flem: dataArray'i i\u015fle\n return dataArray.map(item => item * 2);\n }, [dataArray]); \/\/ Ba\u011f\u0131ml\u0131l\u0131k: dataArray de\u011fi\u015fti\u011finde yeniden hesapla\n\n return (\n processedData<\/code> de\u011fi\u015fkeni useMemo<\/code> ile memoize edilmi\u015ftir. dataArray<\/code> de\u011fi\u015fmedi\u011fi s\u00fcrece, processedData<\/code>'n\u0131n yeniden hesaplanmas\u0131 engellenir. Bu, \u00f6zellikle karma\u015f\u0131k veri d\u00f6n\u00fc\u015f\u00fcmleri veya filtrelemeleri s\u00f6z konusu oldu\u011funda performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.<\/p>\nuseCallback<\/code> ise useMemo<\/code>'ya benzer \u015fekilde fonksiyonlar\u0131 memoize etmek i\u00e7in kullan\u0131l\u0131r. Bir fonksiyonun referans\u0131n\u0131n de\u011fi\u015fmemesini sa\u011flar. Bu, \u00f6zellikle \u00e7ocuk bile\u015fenlere callback fonksiyonlar\u0131 props olarak ge\u00e7irilirken \u00f6nemlidir. E\u011fer bir callback fonksiyonu, useCallback<\/code> ile memoize edilmezse, ana bile\u015fen her render oldu\u011funda fonksiyonun yeni bir referans\u0131 olu\u015fturulur. Bu da, React.memo<\/code> ile optimize edilmi\u015f \u00e7ocuk bile\u015fenlerin gereksiz yere yeniden render olmas\u0131na neden olabilir.<\/p>\nonPress<\/code> olay\u0131n\u0131 y\u00f6netirken:<\/p>\nimport React, { useCallback } from 'react';\n\nconst ParentComponent = () => {\n const handleClick = useCallback(() => {\n console.log('Butona t\u0131kland\u0131!');\n }, []); \/\/ Ba\u011f\u0131ml\u0131l\u0131k dizisi bo\u015f, fonksiyon hi\u00e7 de\u011fi\u015fmeyecek\n\n return (\n handleClick<\/code> fonksiyonu useCallback<\/code> ile memoize edildi\u011fi i\u00e7in, ParentComponent<\/code> yeniden render oldu\u011funda handleClick<\/code> fonksiyonunun referans\u0131 de\u011fi\u015fmez. Bu da ChildButton<\/code>'\u0131n React.memo<\/code> sayesinde gereksiz yere yeniden render edilmesini engeller.<\/p>\nReact.memo<\/code>, useMemo<\/code> ve useCallback<\/code> \u2013 React Native uygulaman\u0131z\u0131n rendering performans\u0131n\u0131 optimize etmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Ancak, her yerde kullanmak yerine, yaln\u0131zca ger\u00e7ekten performans sorunu yaratan veya maliyeti y\u00fcksek olan bile\u015fenler ve hesaplamalar i\u00e7in kullanmak en do\u011frusudur. A\u015f\u0131r\u0131 kullan\u0131m, kodun okunabilirli\u011fini azaltabilir ve beklenmedik davran\u0131\u015flara yol a\u00e7abilir.<\/p>\nFlatList ve SectionList ile Verimli Listeler Olu\u015fturmak<\/h3>\n
FlatList<\/code> ve SectionList<\/code> gibi sanalla\u015ft\u0131rma (virtualization) yeteneklerine sahip bile\u015fenler devreye girer. Bu bile\u015fenler, yaln\u0131zca ekranda g\u00f6r\u00fcn\u00fcr olan \u00f6\u011feleri render ederek bellek kullan\u0131m\u0131n\u0131 ve i\u015flem y\u00fck\u00fcn\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\nFlatList<\/code>, d\u00fcz bir veri dizisini g\u00f6stermek i\u00e7in kullan\u0131l\u0131r. En temel haliyle data<\/code>, renderItem<\/code> ve keyExtractor<\/code> prop'lar\u0131na ihtiya\u00e7 duyar.<\/p>\ndata<\/code>: G\u00f6sterilecek \u00f6\u011felerin dizisi.
\n* renderItem<\/code>: Her bir \u00f6\u011feyi nas\u0131l render edece\u011fimizi belirten bir fonksiyon. Bu fonksiyon, { item, index }<\/code> gibi parametreler al\u0131r ve bir React \u00f6\u011fesi d\u00f6nd\u00fcr\u00fcr.
\n* keyExtractor<\/code>: Her bir \u00f6\u011fe i\u00e7in benzersiz bir anahtar (key) d\u00f6nd\u00fcren bir fonksiyon. Bu, React'in \u00f6\u011feleri verimli bir \u015fekilde g\u00fcncellem
\n esi ve silmesi i\u00e7in kritiktir. Genellikle \u00f6\u011fenin id<\/code>'si kullan\u0131l\u0131r.<\/p>\nFlatList<\/code> kullan\u0131m\u0131:<\/p>\nimport React from 'react';\nimport { FlatList, View, Text, StyleSheet } from 'react-native';\n\nconst DATA = [\n { id: '1', title: '\u0130lk \u00d6\u011fe' },\n { id: '2', title: '\u0130kinci \u00d6\u011fe' },\n \/\/ ... binlerce \u00f6\u011fe olabilir\n];\n\nconst renderItem = ({ item }) => (\n FlatList<\/code>'in performans\u0131n\u0131 daha da art\u0131rmak i\u00e7in kullanabilece\u011finiz baz\u0131 \u00f6nemli prop'lar \u015funlard\u0131r:<\/p>\ngetItemLayout<\/code>: Bu prop, her bir \u00f6\u011fenin y\u00fcksekli\u011fini (veya geni\u015fli\u011fini, yatay listelerde) bilmenizi sa\u011flar. Bu bilgi, FlatList<\/code>'in \u00f6\u011felerin konumunu daha h\u0131zl\u0131 hesaplamas\u0131na yard\u0131mc\u0131 olur ve kayd\u0131rma performans\u0131n\u0131 iyile\u015ftirir. \u00d6zellikle sabit y\u00fckseklikteki \u00f6\u011feler i\u00e7in \u00e7ok etkilidir.<\/p>\ngetItemLayout={(data, index) => (\n {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}\n )}<\/pre>\n
\n Burada ITEM_HEIGHT<\/code> sabit \u00f6\u011fe y\u00fcksekli\u011fidir.<\/p>\nremoveClippedSubviews<\/code>: Bu prop, varsay\u0131lan olarak true<\/code>'dur ve ekran\u0131n d\u0131\u015f\u0131nda kalan \u00f6\u011felerin native alt g\u00f6r\u00fcn\u00fcmlerini kald\u0131r\u0131r. Bu, bellek kullan\u0131m\u0131n\u0131 azalt\u0131r. Ancak, bazen bu prop'un false<\/code> yap\u0131lmas\u0131 baz\u0131 durumlarda sorunlar\u0131 \u00e7\u00f6zebilir (nadiren de olsa).<\/p>\ninitialNumToRender<\/code>: Ba\u015flang\u0131\u00e7ta render edilecek \u00f6\u011fe say\u0131s\u0131. Bu de\u011feri, ekran\u0131 dolduracak kadar bir de\u011fere ayarlamak, kullan\u0131c\u0131n\u0131n ilk g\u00f6rd\u00fc\u011f\u00fcn\u00fczde bo\u015f ekranla kar\u015f\u0131la\u015fmas\u0131n\u0131 engeller.<\/p>\nmaxToRenderPerBatch<\/code>: Her bir render partisindeki \u00f6\u011fe say\u0131s\u0131. Kayd\u0131rma s\u0131ras\u0131nda daha ak\u0131c\u0131 bir deneyim i\u00e7in bu de\u011feri ayarlayabilirsiniz.<\/p>\nwindowSize<\/code>: G\u00f6r\u00fcn\u00fcr alan\u0131n her iki taraf\u0131nda ne kadar \u00f6\u011fenin render edilece\u011fini belirler. Daha b\u00fcy\u00fck bir windowSize<\/code>, kayd\u0131rma s\u0131ras\u0131nda daha az bo\u015fluk g\u00f6r\u00fcnmesini sa\u011flar ancak bellek kullan\u0131m\u0131n\u0131 art\u0131r\u0131r.<\/p>\nupdateCellsBatchingPeriod<\/code>: Yeni \u00f6\u011felerin gruplar halinde render edilme s\u00fcresi (milisaniye).<\/p>\nSectionList<\/code>, veriyi ba\u015fl\u0131klar alt\u0131nda grupland\u0131rarak g\u00f6stermek i\u00e7in kullan\u0131l\u0131r. FlatList<\/code>'e benzer \u015fekilde \u00e7al\u0131\u015f\u0131r ancak sections<\/code> prop'unu al\u0131r. sections<\/code> prop'u, her biri bir title<\/code> (ba\u015fl\u0131k) ve data<\/code> (o ba\u015fl\u0131\u011fa ait \u00f6\u011feler) i\u00e7eren nesnelerden olu\u015fan bir dizidir.<\/p>\nimport React from 'react';\nimport { SectionList, View, Text, StyleSheet } from 'react-native';\n\nconst SECTIONS = [\n {\n title: 'B\u00f6l\u00fcm 1',\n data: [{ id: '1a', text: '\u00d6\u011fe 1A' }, { id: '1b', text: '\u00d6\u011fe 1B' }],\n },\n {\n title: 'B\u00f6l\u00fcm 2',\n data: [{ id: '2a', text: '\u00d6\u011fe 2A' }, { id: '2b', text: '\u00d6\u011fe 2B' }],\n },\n];\n\nconst renderItem = ({ item }) => (\n SectionList<\/code> i\u00e7in de FlatList<\/code>'teki performans optimizasyon prop'lar\u0131n\u0131n \u00e7o\u011fu ge\u00e7erlidir.<\/p>\nFlatList<\/code> kullanmak ve renderItem<\/code> fonksiyonunda her bir \u00fcr\u00fcn kart\u0131n\u0131 optimize etmek \u00f6nemlidir. getItemLayout<\/code> prop'unu kullanarak liste \u00f6\u011felerinin sabit boyutlu olmas\u0131n\u0131 sa\u011flamak, kayd\u0131rmay\u0131 \u00e7ok daha ak\u0131c\u0131 hale getirecektir. Ayr\u0131ca, \u00fcr\u00fcn g\u00f6rselleri i\u00e7in Image<\/code> bile\u015feninin performans\u0131n\u0131 optimize etmek (\u00f6rne\u011fin, react-native-fast-image<\/code> gibi k\u00fct\u00fcphanelerle) de \u00f6nemlidir.
\n2. Sosyal Medya Ak\u0131\u015f\u0131<\/strong>: Bir sosyal medya uygulamas\u0131nda kullan\u0131c\u0131lar\u0131n g\u00f6nderilerini g\u00f6steren bir ak\u0131\u015f. Her g\u00f6nderi metin, resim, video ve yorumlar i\u00e7erebilir. Bu karma\u015f\u0131k yap\u0131ya sahip \u00f6\u011feler i\u00e7in FlatList<\/code>'in sanalla\u015ft\u0131rma \u00f6zelli\u011fi hayati \u00f6nem ta\u015f\u0131r. React.memo<\/code>'yu her bir g\u00f6nderi bile\u015feni i\u00e7in kullanarak, yaln\u0131zca g\u00f6nderinin i\u00e7eri\u011fi de\u011fi\u015fti\u011finde yeniden render olmas\u0131n\u0131 sa\u011flayabiliriz.
\n3. Ayarlar Ekran\u0131<\/strong>: Bir mobil uygulaman\u0131n ayarlar ekran\u0131nda genellikle grupland\u0131r\u0131lm\u0131\u015f bir\u00e7ok se\u00e7enek bulunur. Bu t\u00fcr bir yap\u0131 i\u00e7in SectionList<\/code> idealdir. Her bir ayar grubu bir b\u00f6l\u00fcm (section) olarak temsil edilebilir.<\/p>\nFlatList<\/code> ve SectionList<\/code>, React Native'de liste performans\u0131n\u0131 optimize etmek i\u00e7in vazge\u00e7ilmez ara\u00e7lard\u0131r. Ancak, do\u011fru yap\u0131land\u0131r\u0131lmad\u0131klar\u0131nda veya i\u00e7lerindeki \u00f6\u011feler optimize edilmedi\u011finde hala performans sorunlar\u0131na yol a\u00e7abilirler. Bu nedenle, bu bile\u015fenleri kullan\u0131rken yukar\u0131da bahsedilen prop'lar\u0131 dikkatlice g\u00f6zden ge\u00e7irmek ve uygulaman\u0131z\u0131n \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re ayarlamak \u00f6nemlidir.<\/p>\nNative Thread'leri Anlamak ve JSI ile \u0130leti\u015fimi Optimize Etmek<\/h3>\n
react-native-reanimated<\/code> gibi k\u00fct\u00fcphaneler, JSI'n\u0131n sundu\u011fu avantajlar\u0131 kullanarak animasyonlar\u0131 do\u011frudan native tarafta i\u015fler. Bu sayede, JavaScript thread'ini me\u015fgul etmeden \u00e7ok daha ak\u0131c\u0131 ve karma\u015f\u0131k animasyonlar olu\u015fturmak m\u00fcmk\u00fcn olur. E\u011fer uygulaman\u0131zda yo\u011fun animasyonlar kullan\u0131yorsan\u0131z, react-native-reanimated<\/code> gibi JSI tabanl\u0131 k\u00fct\u00fcphaneleri tercih etmek, performans\u0131n\u0131z\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.<\/p>\nBellek Y\u00f6netimi ve S\u0131z\u0131nt\u0131lar\u0131 \u00d6nleme<\/h3>\n
useEffect<\/code> hook'unda yayg\u0131nd\u0131r. useEffect<\/code>'in geri d\u00f6n\u00fc\u015f fonksiyonu, bile\u015fen unmount edildi\u011finde \u00e7al\u0131\u015f\u0131r ve temizlik i\u015flemlerini yapmak i\u00e7in idealdir.<\/p>\nimport React, { useEffect } from 'react';\n import { DeviceEventEmitter } from 'react-native';\n\n const MyComponent = () => {\n useEffect(() => {\n const subscription = DeviceEventEmitter.addListener('someEvent', () => {\n \/\/ Olay dinleyici\n });\n\n \/\/ Cleanup fonksiyonu: Bile\u015fen unmount edildi\u011finde \u00e7al\u0131\u015f\u0131r\n return () => {\n subscription.remove(); \/\/ Dinleyiciyi kald\u0131r\n console.log('MyComponent unmount edildi ve dinleyici kald\u0131r\u0131ld\u0131.');\n };\n }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi, sadece mount ve unmount'ta \u00e7al\u0131\u015f\u0131r\n\n return
\n Burada subscription.remove()<\/code> \u00e7a\u011fr\u0131s\u0131, useEffect<\/code>'in geri d\u00f6n\u00fc\u015f fonksiyonunda yap\u0131ld\u0131\u011f\u0131 i\u00e7in, bile\u015fen ekrandan kald\u0131r\u0131ld\u0131\u011f\u0131nda olay dinleyicisi bellekten temizlenir.<\/p>\nsetTimeout<\/code> veya setInterval<\/code> gibi zamanlay\u0131c\u0131lar kullan\u0131ld\u0131\u011f\u0131nda, bu zamanlay\u0131c\u0131lar\u0131n da temizlenmesi gerekir. E\u011fer bir bile\u015fen unmount edildi\u011finde \u00e7al\u0131\u015fan bir zamanlay\u0131c\u0131 varsa ve bu zamanlay\u0131c\u0131 temizlenmezse, zamanlay\u0131c\u0131 bellekte kal\u0131r ve potansiyel olarak hatalara yol a\u00e7ar.<\/p>\nimport React, { useEffect, useState } from 'react';\n\n const TimerComponent = () => {\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n const intervalId = setInterval(() => {\n setCount(prevCount => prevCount + 1);\n }, 1000);\n\n \/\/ Cleanup fonksiyonu\n return () => {\n clearInterval(intervalId); \/\/ Zamanlay\u0131c\u0131y\u0131 temizle\n console.log('TimerComponent unmount edildi ve zamanlay\u0131c\u0131 kald\u0131r\u0131ld\u0131.');\n };\n }, []);\n\n return removeClippedSubviews<\/code> gibi prop'lar bu sorunu \u00e7\u00f6zmeye yard\u0131mc\u0131 olur.<\/p>\nuseMemo<\/code> ve useCallback<\/code> ile bunlar\u0131 memoize edin.
\n* B\u00fcy\u00fck Veri Setlerini Y\u00f6netme<\/strong>: FlatList<\/code> ve SectionList<\/code> gibi sanalla\u015ft\u0131rma bile\u015fenlerini kullan\u0131n.
\n* Resim Optimizasyonu<\/strong>: B\u00fcy\u00fck resimleri kullanmaktan ka\u00e7\u0131n\u0131n, do\u011fru boyutlarda ve formatlarda optimize edilmi\u015f resimler kullan\u0131n. react-native-fast-image<\/code> gibi k\u00fct\u00fcphaneler, resim y\u00fckleme ve \u00f6nbellekleme performans\u0131n\u0131 art\u0131rabilir.
\n* Global Durum Y\u00f6netimi<\/strong>: Redux, Zustand veya Context API gibi global durum y\u00f6netimi \u00e7\u00f6z\u00fcmlerini kullan\u0131rken, gereksiz g\u00fcncellemeleri ve b\u00fcy\u00fck veri depolamay\u0131 \u00f6nlemek i\u00e7in dikkatli olun. Sadece gerekli olan verileri store'da tutun.
\n* Component Lifecycle'\u0131n\u0131 Anlamak<\/strong>: Bile\u015fenlerin mount, update ve unmount a\u015famalar\u0131n\u0131 iyi anlay\u0131n ve temizlik i\u015flemlerini do\u011fru yerlerde yap\u0131n.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131: Vaka Analizleri<\/h3>\n
Vaka Analizi 1: Yo\u011fun Veri G\u00f6steren Bir Finansal Uygulama<\/h4>\n
\n* Binlerce hisse senedini listeleyen bir ekranda kayd\u0131rma performans\u0131 d\u00fc\u015f\u00fckt\u00fc.
\n* Ger\u00e7ek zamanl\u0131 fiyat g\u00fcncellemeleri, uygulaman\u0131n genelinde gereksiz re-render'lara neden oluyordu.
\n* Karma\u015f\u0131k grafiklerin y\u00fcklenmesi ve g\u00fcncellenmesi zaman al\u0131yordu.
\n* Uygulaman\u0131n bellek kullan\u0131m\u0131 zamanla art\u0131yordu.<\/p>\n
\n1. FlatList<\/code> Optimizasyonu<\/strong>: Hisse senedi listesi i\u00e7in FlatList<\/code> kullan\u0131ld\u0131. getItemLayout<\/code> prop'u, her hisse senedi \u00f6\u011fesinin sabit bir y\u00fcksekli\u011fe sahip oldu\u011fu varsay\u0131larak uyguland\u0131. Bu, kayd\u0131rma performans\u0131n\u0131 ciddi \u015fekilde iyile\u015ftirdi.
\n2. React.memo<\/code> Kullan\u0131m\u0131<\/strong>: Her bir hisse senedi \u00f6\u011fesi bile\u015feni React.memo<\/code> ile sar\u0131ld\u0131. Bu sayede, yaln\u0131zca hisse senedinin kendi verileri (fiyat, de\u011fi\u015fim vb.) de\u011fi\u015fti\u011finde ilgili \u00f6\u011fe yeniden render oldu. Di\u011fer veriler (\u00f6rne\u011fin, haber ba\u015fl\u0131klar\u0131) de\u011fi\u015fse bile hisse senedi \u00f6\u011fesi etkilenmedi.
\n3. useMemo<\/code> ve useCallback<\/code> ile Durum Y\u00f6netimi<\/strong>: Ger\u00e7ek zamanl\u0131 veri g\u00fcncellemeleri i\u00e7in kullan\u0131lan state y\u00f6netimi (\u00f6rne\u011fin, Redux veya Context API) optimize edildi. Gereksiz g\u00fcncellemeleri \u00f6nlemek i\u00e7in useMemo<\/code> ile hesaplamalar memoize edildi ve useCallback<\/code> ile callback fonksiyonlar\u0131n\u0131n referanslar\u0131 sabit tutuldu. Bu, gereksiz re-render'lar\u0131n zincirleme etkisini azaltt\u0131.
\n4. Grafik Optimizasyonu<\/strong>: Grafik \u00e7izimi i\u00e7in react-native-svg<\/code> ve react-native-chart-kit<\/code> gibi k\u00fct\u00fcphaneler kullan\u0131ld\u0131. Grafikler, yaln\u0131zca g\u00f6r\u00fcn\u00fcr olduklar\u0131nda veya verileri ger\u00e7ekten de\u011fi\u015fti\u011finde g\u00fcncellenecek \u015fekilde ayarland\u0131. useMemo<\/code> ile grafik verilerinin i\u015flenmesi optimize edildi.
\n5. Bellek Y\u00f6netimi<\/strong>: useEffect<\/code> hook'lar\u0131ndaki t\u00fcm dinleyiciler ve zamanlay\u0131c\u0131lar, bile\u015fen unmount edildi\u011finde temizlendi. B\u00fcy\u00fck veri setlerinin bellekte gereksiz yere tutulmas\u0131n\u0131 \u00f6nlemek i\u00e7in, kullan\u0131lmayan veriler d\u00fczenli olarak temizlendi.
\n6. JSI ve Fabric'ten Yararlanma<\/strong>: Uygulaman\u0131n g\u00fcncel React Native s\u00fcr\u00fcmleriyle geli\u015ftirilmesi ve react-native-reanimated<\/code> gibi JSI tabanl\u0131 k\u00fct\u00fcphanelerin kullan\u0131lmas\u0131, animasyonlar\u0131n ve UI etkile\u015fimlerinin daha ak\u0131c\u0131 olmas\u0131n\u0131 sa\u011flad\u0131.<\/p>\nVaka Analizi 2: Sosyal Medya \u0130\u00e7erik Ak\u0131\u015f\u0131 ve Etkile\u015fimler<\/h4>\n
\n* Ak\u0131\u015fta kayd\u0131rma s\u0131ras\u0131nda tak\u0131lmalar ve gecikmeler ya\u015fan\u0131yordu.
\n* Video oynat\u0131m\u0131 ve resim y\u00fcklemeleri performans\u0131 olumsuz etkiliyordu.
\n* Be\u011fenme, yorum yapma gibi etkile\u015fimler bazen yava\u015f yan\u0131t veriyordu.
\n* Uygulama uzun s\u00fcre kullan\u0131ld\u0131\u011f\u0131nda pil t\u00fcketimi art\u0131yordu.<\/p>\n
\n1. Sanalla\u015ft\u0131r\u0131lm\u0131\u015f Liste<\/strong>: FlatList<\/code> kullan\u0131ld\u0131 ve initialNumToRender<\/code>, maxToRenderPerBatch<\/code>, windowSize<\/code> gibi prop'lar optimize edilerek ak\u0131c\u0131 bir kayd\u0131rma deneyimi sa\u011fland\u0131.
\n2. React.memo<\/code> ile G\u00f6nderi Bile\u015feni Optimizasyonu<\/strong>: Her bir g\u00f6nderi bile\u015feni React.memo<\/code> ile optimize edildi. Bu, yaln\u0131zca g\u00f6nderinin i\u00e7eri\u011fi (metin, resim URL'si, video URL'si vb.) de\u011fi\u015fti\u011finde g\u00f6nderinin yeniden render edilmesini sa\u011flad\u0131. Be\u011fenme veya yorum say\u0131s\u0131ndaki de\u011fi\u015fiklikler gibi durum g\u00fcncellemeleri, g\u00f6nderi bile\u015fenini gereksiz yere yeniden render etmiyordu.
\n3. Video ve Resim Optimizasyonu<\/strong>: Video oynat\u0131m\u0131 i\u00e7in react-native-video<\/code> ve resimler i\u00e7in react-native-fast-image<\/code> gibi optimize edilmi\u015f k\u00fct\u00fcphaneler kullan\u0131ld\u0131. Videolar ve resimler yaln\u0131zca g\u00f6r\u00fcn\u00fcr olduklar\u0131nda y\u00fcklendi ve oynat\u0131ld\u0131. Arka planda oynat\u0131lan veya g\u00f6r\u00fcnmeyen videolar durduruldu.
\n4. **useCallback<\/code> ile Et<\/p>\n","protected":false},"excerpt":{"rendered":"React Native’de Verimli Rendering: Performans Optimizasyonu Rehberi React Native ile mobil uygulama geli\u015ftirirken performans, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir fakt\u00f6rd\u00fcr.","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":[128],"tags":[],"class_list":{"0":"post-41533","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n