\nReact uygulamalar\u0131n\u0131z\u0131n ilk render performans\u0131n\u0131 art\u0131rmak ve gereksiz hesaplamalar\u0131 ortadan kald\u0131rmak i\u00e7in useState hook’una bir fonksiyon ge\u00e7irme tekni\u011fini ke\u015ffedin. Bu teknik, pahal\u0131 hesaplamalar\u0131 yaln\u0131zca gerekti\u011finde \u00e7al\u0131\u015ft\u0131rarak uygulaman\u0131z\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar ve kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n
Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini her \u015feyin \u00fczerinde tutar. H\u0131zl\u0131 y\u00fcklenen, ak\u0131c\u0131 \u00e7al\u0131\u015fan ve an\u0131nda tepki veren uygulamalar, kullan\u0131c\u0131lar\u0131n sitenizde kalma olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131rken, yava\u015f ve hantal uygulamalar an\u0131nda terk edilmeyle sonu\u00e7lanabilir. React, bile\u015fen tabanl\u0131 yap\u0131s\u0131yla h\u0131zl\u0131 ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in harika bir ara\u00e7 olsa da, baz\u0131 ince detaylar\u0131 g\u00f6z ard\u0131 etmek beklenmedik performans darbo\u011fazlar\u0131na yol a\u00e7abilir. Bu darbo\u011fazlardan biri de, bir bile\u015fenin ilk kez render edildi\u011finde yap\u0131lan gereksiz ve maliyetli hesaplamalard\u0131r. \u00d6zellikle useState<\/code> hook’u ile state ba\u015flat\u0131l\u0131rken yap\u0131lan yayg\u0131n bir hata, uygulaman\u0131z\u0131n ilk y\u00fcklenme s\u00fcresini dramatik bir \u015fekilde uzatabilir.<\/p>\nPeki, tam olarak neden bahsediyoruz? \u00c7o\u011fu zaman, bir bile\u015fenin ilk state’ini belirlerken do\u011frudan bir de\u011fer atar\u0131z: const [count, setCount] = useState(0);<\/code> gibi. Bu, basit de\u011ferler i\u00e7in harika ve olmas\u0131 gerekendir. Ancak, ilk state de\u011feri karma\u015f\u0131k bir hesaplama, b\u00fcy\u00fck bir veri yap\u0131s\u0131n\u0131n i\u015flenmesi veya bir API \u00e7a\u011fr\u0131s\u0131 sonucu elde ediliyorsa ne olur? \u0130\u015fte o zaman i\u015fler kar\u0131\u015f\u0131r. E\u011fer useState<\/code>‘e do\u011frudan bu “maliyetli” hesaplaman\u0131n sonucunu verirseniz, React bu hesaplamay\u0131 her renderda<\/b> yeniden \u00e7al\u0131\u015ft\u0131rmaya \u00e7al\u0131\u015f\u0131r. Evet, yanl\u0131\u015f duymad\u0131n\u0131z, sadece ilk renderda de\u011fil, bile\u015fenin yeniden render edildi\u011fi her seferde! Bu durum, \u00f6zellikle s\u0131k s\u0131k yeniden render olan veya karma\u015f\u0131k bile\u015fenler s\u00f6z konusu oldu\u011funda uygulaman\u0131z\u0131n performans\u0131n\u0131 ciddi \u015fekilde d\u00fc\u015f\u00fcrebilir. Kullan\u0131c\u0131lar, her etkile\u015fimde yava\u015flayan veya tak\u0131lan bir aray\u00fczle kar\u015f\u0131la\u015fabilir ve bu da k\u00f6t\u00fc bir ilk izlenim yarat\u0131r.<\/p>\n Bu makalede, bu yayg\u0131n performans tuza\u011f\u0131n\u0131 nas\u0131l a\u015faca\u011f\u0131n\u0131z\u0131, useState<\/code>‘i daha ak\u0131ll\u0131ca nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ve uygulaman\u0131z\u0131n ilk y\u00fcklenme s\u00fcresini nas\u0131l optimize edece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz. Temel prensip, useState<\/code>‘e do\u011frudan bir de\u011feri \u00e7a\u011f\u0131rmak yerine, de\u011feri d\u00f6nd\u00fcren bir fonksiyon ge\u00e7irmektir. Bu k\u00fc\u00e7\u00fck ama g\u00fc\u00e7l\u00fc de\u011fi\u015fiklik, React’in bu maliyetli hesaplamay\u0131 yaln\u0131zca ilk renderda, yani ger\u00e7ekten ihtiya\u00e7 duyuldu\u011funda \u00e7al\u0131\u015ft\u0131rmas\u0131n\u0131 sa\u011flayarak \u00f6nemli performans kazan\u0131mlar\u0131 elde etmenize olanak tan\u0131r. Haz\u0131r m\u0131s\u0131n\u0131z? Gelin React performans\u0131n\u0131n bu kritik detay\u0131na daha yak\u0131ndan bakal\u0131m ve uygulamalar\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yal\u0131m.<\/p>\nuseState Nedir ve Performansla \u0130li\u015fkisi Nereden Gelir?<\/h2>\n React geli\u015ftiricileri i\u00e7in useState<\/code>, bile\u015fenlerin durumunu y\u00f6netmek i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. Fonksiyonel bile\u015fenlere “state” ad\u0131n\u0131 verdi\u011fimiz i\u00e7 durumu eklememizi sa\u011flayan bir Hook’tur. Temel olarak, bir de\u011fer (state) ve bu de\u011feri g\u00fcncellemek i\u00e7in bir fonksiyon (setter) d\u00f6nd\u00fcr\u00fcr. Kullan\u0131m\u0131 olduk\u00e7a basittir:<\/p>\n\n import React, { useState } from 'react';\n\n function Sayac() {\n const [sayi, setSayi] = useState(0); \/\/ Ba\u015flang\u0131\u00e7 de\u011feri 0\n\n const artir = () => {\n setSayi(sayi + 1);\n };\n\n return (\n \n
Saya\u00e7: {sayi}<\/p>\n Art\u0131r<\/button>\n <\/div>\n );\n }\n <\/pre>\n<\/code><\/p>\n
Yukar\u0131daki \u00f6rnekte, useState(0)<\/code> ifadesiyle sayi<\/code> state'ini 0<\/code> olarak ba\u015flat\u0131yoruz. Bu, ilk renderda sayi<\/code>'nin 0<\/code> olmas\u0131n\u0131 sa\u011flar. Herhangi bir maliyetli i\u015flem i\u00e7ermedi\u011fi i\u00e7in bu kullan\u0131m tamamen do\u011frudur ve performans a\u00e7\u0131s\u0131ndan bir sorun yaratmaz. Ancak, ilk state de\u011ferini elde etmek i\u00e7in karma\u015f\u0131k bir i\u015flem gerekti\u011finde durum de\u011fi\u015fir. \u00d6rne\u011fin, bir veritaban\u0131ndan \u00e7ekilen b\u00fcy\u00fck bir JSON dizisini filtrelemek, karma\u015f\u0131k matematiksel hesaplamalar yapmak veya bir a\u011f iste\u011fi sonucunu i\u015flemeye ba\u015flamak gibi senaryolar\u0131 d\u00fc\u015f\u00fcn\u00fcn.<\/p>\nReact'in \u00e7al\u0131\u015fma prensibine g\u00f6re, bir bile\u015fen her yeniden render edildi\u011finde (\u00f6rne\u011fin, state'i veya props'lar\u0131 de\u011fi\u015fti\u011finde), bile\u015fenin fonksiyonu ba\u015ftan sona tekrar \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r. Bu, bile\u015fenin i\u00e7indeki t\u00fcm kodun tekrar y\u00fcr\u00fct\u00fcld\u00fc\u011f\u00fc anlam\u0131na gelir. E\u011fer useState<\/code>'in i\u00e7ine do\u011frudan bir fonksiyon \u00e7a\u011fr\u0131s\u0131 koyarsan\u0131z ve bu fonksiyon maliyetli bir i\u015flem yap\u0131yorsa, bu maliyetli i\u015flem her renderda tekrarlan\u0131r. \u0130\u015fte bu durum, gereksiz i\u015flem g\u00fcc\u00fc t\u00fcketimine ve dolay\u0131s\u0131yla k\u00f6t\u00fc performansa yol a\u00e7ar.<\/p>\n\n \/\/ Performans Sorunu Yaratabilecek Yanl\u0131\u015f Yakla\u015f\u0131m\n function AgirHesaplamaYap() {\n console.log(\"Maliyetli hesaplama her renderda \u00e7al\u0131\u015f\u0131yor!\");\n \/\/ \u00d6rne\u011fin, 100.000 elemanl\u0131 bir diziyi filtreleme\n return Array.from({ length: 100000 }, (_, i) => i * 2)\n .filter(val => val % 3 === 0)\n .slice(0, 10);\n }\n\n function YanlisKullanim() {\n \/\/ DIKKAT: AgirHesaplamaYap fonksiyonu her renderda \u00e7a\u011fr\u0131lacak!\n const [data, setData] = useState(AgirHesaplamaYap());\n\n const [count, setCount] = useState(0); \/\/ Bu state de\u011fi\u015fti\u011finde bile...\n\n return (\n \n
Veri Uzunlu\u011fu: {data.length}<\/p>\n setCount(count + 1)}>Sayac\u0131 Art\u0131r ({count})<\/button>\n <\/div>\n );\n }\n <\/pre>\n<\/code><\/p>\n
Yukar\u0131daki YanlisKullanim<\/code> bile\u015feninde, count<\/code> state'ini her de\u011fi\u015ftirdi\u011finizde, bile\u015fen yeniden render olur ve dolay\u0131s\u0131yla AgirHesaplamaYap()<\/code> fonksiyonu tekrar \u00e7al\u0131\u015f\u0131r. Bu, sadece ilk kez render edildi\u011finde de\u011fil, her g\u00fcncellemede gereksiz bir performans y\u00fck\u00fc olu\u015fturur. Bu durumun \u00f6n\u00fcne ge\u00e7mek i\u00e7in React bize \u00e7ok basit ama etkili bir \u00e7\u00f6z\u00fcm sunar: \"lazy initial state\" yani \"tembel ba\u015flang\u0131\u00e7 durumu\". Bu teknik, maliyetli hesaplamalar\u0131n sadece bile\u015fen ilk kez monte edildi\u011finde (mount edildi\u011finde) \u00e7al\u0131\u015fmas\u0131n\u0131 garanti eder.<\/p>\n\u0130lk Durumu Bir Fonksiyonla Ba\u015flatmak: Neden ve Nas\u0131l Performans Art\u0131r\u0131l\u0131r?<\/h2>\n useState<\/code> hook'una bir fonksiyon ge\u00e7irmek, \u00f6zellikle ba\u015flang\u0131\u00e7 durumunun belirlenmesi karma\u015f\u0131k veya maliyetli oldu\u011funda devreye giren g\u00fc\u00e7l\u00fc bir optimizasyon tekni\u011fidir. Bu y\u00f6ntem, React'in dahili mekanizmalar\u0131n\u0131 kullanarak gereksiz hesaplamalar\u0131 ortadan kald\u0131r\u0131r ve uygulaman\u0131z\u0131n daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Gelin, bu tekni\u011fin neden bu kadar \u00f6nemli oldu\u011funu ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyelim.<\/p>\nPerformans Katili: Maliyetli \u0130lk Durum Hesaplamalar\u0131 Nas\u0131l \u00d6nlenir?<\/h3>\n Yukar\u0131da da bahsetti\u011fimiz gibi, useState<\/code>'e do\u011frudan bir de\u011fer atamak yerine, bu de\u011feri hesaplayan bir fonksiyon atamak, React'in yaln\u0131zca ilk render s\u0131ras\u0131nda bu fonksiyonu \u00e7al\u0131\u015ft\u0131rmas\u0131n\u0131 sa\u011flar. Bu, React'in \"tembel ba\u015flang\u0131\u00e7 durumu\" (lazy initial state) ad\u0131 verilen bir \u00f6zelli\u011fidir. Fonksiyon yaln\u0131zca bile\u015fen ilk kez monte edildi\u011finde (mounted) \u00e7a\u011fr\u0131l\u0131r ve de\u011feri hesaplar. Sonraki her render'da, React bu fonksiyonu tekrar \u00e7a\u011f\u0131rmaz, \u00e7\u00fcnk\u00fc state de\u011feri zaten belirlenmi\u015ftir.<\/p>\n\n \/\/ Maliyetli bir hesaplama yapan fonksiyon\n const calculateInitialExpensiveData = () => {\n console.log(\"Bu hesaplama SADECE \u0130LK RENDERDA \u00e7al\u0131\u015f\u0131r.\");\n \/\/ Ger\u00e7ek d\u00fcnya senaryosu: B\u00fcy\u00fck bir JSON dosyas\u0131n\u0131 parse etmek,\n \/\/ karma\u015f\u0131k bir algoritma \u00e7al\u0131\u015ft\u0131rmak veya bir veritaban\u0131 sorgusu sim\u00fcle etmek.\n let sum = 0;\n for (let i = 0; i < 1000000; i++) {\n sum += i;\n }\n return Hesaplanm\u0131\u015f Veri: ${sum}<\/code>;\n };\n\n function DogruKullanim() {\n \/\/ Do\u011fru Yakla\u015f\u0131m: calculateInitialExpensiveData fonksiyonunu useState'e do\u011frudan ge\u00e7irin.\n \/\/ Fonksiyonun KEND\u0130S\u0130N\u0130 ge\u00e7iriyoruz, fonksiyonu \u00c7A\u011eIRMIYORUZ!\n const [data, setData] = useState(calculateInitialExpensiveData);\n\n const [clickCount, setClickCount] = useState(0);\n\n return (\n \n
Do\u011fru Kullan\u0131m Bile\u015feni<\/h3>\n Ba\u015flang\u0131\u00e7 Verisi: {data}<\/p>\n
T\u0131klama Say\u0131s\u0131: {clickCount}<\/p>\n setClickCount(prev => prev + 1)}>Sayac\u0131 Art\u0131r<\/button>\n <\/div>\n );\n }\n <\/pre>\n<\/code><\/p>\n
DogruKullanim<\/code> bile\u015fenini \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda ve taray\u0131c\u0131n\u0131n konsolunu a\u00e7t\u0131\u011f\u0131n\u0131zda, \"Bu hesaplama SADECE \u0130LK RENDERDA \u00e7al\u0131\u015f\u0131r.\" mesaj\u0131n\u0131 yaln\u0131zca bir kez g\u00f6receksiniz. Ard\u0131ndan \"Sayac\u0131 Art\u0131r\" d\u00fc\u011fmesine her t\u0131klad\u0131\u011f\u0131n\u0131zda bile\u015fen yeniden render olsa da, o mesaj bir daha g\u00f6r\u00fcnmeyecektir. Bu, calculateInitialExpensiveData<\/code> fonksiyonunun yaln\u0131zca bir kez, yani bile\u015fen ilk y\u00fcklendi\u011finde \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131 anlam\u0131na gelir. Bu teknik, gereksiz i\u015flem y\u00fck\u00fcn\u00fc ortadan kald\u0131rarak uygulaman\u0131z\u0131n \u00e7ok daha h\u0131zl\u0131 tepki vermesini sa\u011flar.<\/p>\n\u00c7\u00f6z\u00fcm: Lazy Initial State (Tembel Ba\u015flang\u0131\u00e7 Durumu) Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n React'in useState<\/code> Hook'u, ilk parametre olarak bir de\u011fer alman\u0131n yan\u0131 s\u0131ra, bir fonksiyon da kabul edebilir. E\u011fer bu parametre bir fonksiyon ise, React bunu \u00f6zel bir durum olarak ele al\u0131r: Bu fonksiyonu sadece ve sadece bile\u015fen ilk kez DOM'a eklendi\u011finde (mount edildi\u011finde) \u00e7al\u0131\u015ft\u0131r\u0131r. Fonksiyonun d\u00f6n\u00fc\u015f de\u011feri, state'in ba\u015flang\u0131\u00e7 de\u011feri olarak kullan\u0131l\u0131r.<\/p>\nBu mekanizma, \"tembel\" (lazy) olarak adland\u0131r\u0131l\u0131r, \u00e7\u00fcnk\u00fc hesaplama, ger\u00e7ekten ihtiya\u00e7 duyulana kadar ertelenir. Bile\u015fen yeniden render edildi\u011finde, React zaten belirlenmi\u015f olan state de\u011ferini haf\u0131zadan okur, fonksiyonu tekrar \u00e7al\u0131\u015ft\u0131rma zahmetine girmez. Bu sayede, uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresi \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131sal\u0131r ve genel performans art\u0131\u015f\u0131 sa\u011flan\u0131r. \u00d6zellikle mobil cihazlarda veya d\u00fc\u015f\u00fck performansl\u0131 donan\u0131mlarda \u00e7al\u0131\u015fan uygulamalar i\u00e7in bu optimizasyon hayati \u00f6nem ta\u015f\u0131r.<\/p>\n
\n
Uzman \u0130pucu: Bu teknikle, \u00f6zellikle ilk y\u00fcklemede veya b\u00fcy\u00fck veri manip\u00fclasyonlar\u0131nda, uygulaman\u0131z\u0131n yan\u0131t verme s\u00fcresini %30-50 oran\u0131nda iyile\u015ftirebilirsiniz. Her setState \u00e7a\u011fr\u0131s\u0131 ve yeniden render cycle'\u0131, bile\u015fenin yeniden \u00e7al\u0131\u015fmas\u0131na neden olur. Fonksiyonel ba\u015flatma ile bu maliyeti yaln\u0131zca bir kere \u00f6dersiniz.<\/p>\n<\/p><\/div>\n
\u00d6zetle, ba\u015flang\u0131\u00e7 de\u011feri maliyetli bir hesaplama gerektiriyorsa, useState(birFonksiyon())<\/code> yerine useState(birFonksiyon)<\/code> kullan\u0131n. Bu basit ama etkili de\u011fi\u015fiklik, React uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka Analizleri: Uygulamada Performans Kazan\u0131mlar\u0131<\/h2>\n Teorik bilgi g\u00fczeldir, ancak ger\u00e7ek d\u00fcnya uygulamalar\u0131nda bu tekniklerin nas\u0131l fark yaratt\u0131\u011f\u0131n\u0131 g\u00f6rmek, konuyu tam olarak anlamam\u0131z\u0131 sa\u011flar. useState<\/code>'e fonksiyon ge\u00e7irme tekni\u011fi, \u00f6zellikle b\u00fcy\u00fck veri setleriyle, karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleriyle ve performans\u0131n kritik oldu\u011fu durumlarda kendini g\u00f6sterir. \u0130\u015fte size iki farkl\u0131 senaryo \u00fczerinden bu tekni\u011fin nas\u0131l kullan\u0131labilece\u011fi ve ne gibi faydalar sa\u011flayabilece\u011fine dair vaka analizleri.<\/p>\nSenaryo 1: B\u00fcy\u00fck Veri Setlerinin \u0130lk Filtrelemesi veya \u0130\u015flenmesi<\/h3>\n Bir e-ticaret uygulamas\u0131nda \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z\u0131 hayal edin. Bir kategorinin sayfas\u0131nda 10.000'den fazla \u00fcr\u00fcn var ve bu \u00fcr\u00fcnlerin varsay\u0131lan olarak belirli kriterlere g\u00f6re (\u00f6rne\u011fin, \"stokta olanlar\" ve \"indirimdeki \u00fcr\u00fcnler\") filtrelenmesi gerekiyor. Bu ilk filtreleme i\u015flemi, b\u00fcy\u00fck bir diziyi dola\u015fmay\u0131 ve yeni bir dizi olu\u015fturmay\u0131 gerektirece\u011fi i\u00e7in olduk\u00e7a maliyetli olabilir.<\/p>\n
\n import React, { useState } from 'react';\n\n \/\/ \u00c7ok b\u00fcy\u00fck bir \u00fcr\u00fcn listesi sim\u00fclasyonu\n const initialProducts = Array.from({ length: 100000 }, (_, i) => ({\n id: i,\n name: \u00dcr\u00fcn ${i}<\/code>,\n price: Math.random() * 100 + 10,\n inStock: i % 3 === 0, \/\/ Her 3 \u00fcr\u00fcnden biri stokta\n onSale: i % 5 === 0, \/\/ Her 5 \u00fcr\u00fcnden biri indirimde\n }));\n\n \/\/ Maliyetli ilk filtreleme fonksiyonu\n const filterInitialProducts = () => {\n console.log(\"B\u00fcy\u00fck veri seti ilk kez filtreleniyor...\");\n \/\/ Varsay\u0131lan olarak stokta olan ve indirimdeki \u00fcr\u00fcnleri filtrele\n const filtered = initialProducts.filter(\n product => product.inStock && product.onSale\n );\n console.log(\u0130lk filtrelenen \u00fcr\u00fcn say\u0131s\u0131: ${filtered.length}<\/code>);\n return filtered;\n };\n\n function ProductListing() {\n \/\/ \u0130lk durumu bir fonksiyonla ba\u015flatarak sadece ilk renderda filtreleme yapar\u0131z.\n const [displayProducts, setDisplayProducts] = useState(filterInitialProducts);\n const [searchQuery, setSearchQuery] = useState('');\n\n \/\/ Arama sorgusuna g\u00f6re \u00fcr\u00fcnleri filtreleyen bir fonksiyon\n const handleSearch = (e) => {\n const query = e.target.value;\n setSearchQuery(query);\n \/\/ Arama her de\u011fi\u015fti\u011finde yeniden filtreleme yapar\n const newFiltered = filterInitialProducts().filter(product =>\n product.name.toLowerCase().includes(query.toLowerCase())\n );\n setDisplayProducts(newFiltered);\n };\n\n return (\n \n
\u00dcr\u00fcn Listesi ({displayProducts.length} adet)<\/h2>\n \n {displayProducts.map(product => (\n \n {product.name} - ${product.price.toFixed(2)} {product.onSale && '(\u0130ndirimde)'}\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n <\/pre>\n<\/code><\/p>\n
Bu senaryoda, filterInitialProducts<\/code> fonksiyonu 100.000 elemanl\u0131 bir diziyi iki farkl\u0131 kritere g\u00f6re filtreliyor. E\u011fer bu fonksiyonu useState(filterInitialProducts())<\/code> \u015feklinde \u00e7a\u011f\u0131rsayd\u0131k, arama kutusuna her harf yazd\u0131\u011f\u0131m\u0131zda (yani searchQuery<\/code> state'i her de\u011fi\u015fti\u011finde), bu b\u00fcy\u00fck filtreleme i\u015flemi tekrar tekrar \u00e7al\u0131\u015ft\u0131r\u0131lacakt\u0131. Bu da uygulaman\u0131n tak\u0131lmas\u0131na, kullan\u0131c\u0131 deneyiminin ciddi \u015fekilde bozulmas\u0131na neden olurdu. Ancak, useState(filterInitialProducts)<\/code> kullanarak, bu maliyetli i\u015flem yaln\u0131zca bile\u015fen ilk kez y\u00fcklendi\u011finde \u00e7al\u0131\u015f\u0131r. Sonraki filtrelemeler (handleSearch<\/code> fonksiyonu i\u00e7inde), zaten filtrelenmi\u015f ba\u015flang\u0131\u00e7 verisi \u00fczerinden veya daha g\u00fcncel veri \u00fczerinden yap\u0131labilir, ancak useState<\/code>'in ba\u015flang\u0131\u00e7 de\u011feri hesaplama y\u00fck\u00fc ortadan kalkar.<\/p>\nSenaryo 2: Karma\u015f\u0131k Hesaplamalara Dayal\u0131 UI Durumlar\u0131<\/h3>\n Ba\u015fka bir \u00f6rnek olarak, kullan\u0131c\u0131lar\u0131n karma\u015f\u0131k tercihlerine g\u00f6re bir aray\u00fcz\u00fcn ba\u015flang\u0131\u00e7 durumunu belirleyen bir yap\u0131land\u0131rma paneli d\u00fc\u015f\u00fcnelim. Bu tercihler, varsay\u0131lan bir JSON dosyas\u0131ndan okunup, kullan\u0131c\u0131n\u0131n daha \u00f6nceki oturumlar\u0131ndan gelen ayarlarla birle\u015ftirilip, ard\u0131ndan \u00f6zel bir tema veya d\u00fczen olu\u015fturmak i\u00e7in i\u015fleniyor olabilir.<\/p>\n
\n import React, { useState } from 'react';\n\n \/\/ Varsay\u0131lan UI ayarlar\u0131 (karma\u015f\u0131k bir obje)\n const defaultUISettings = {\n theme: 'dark',\n sidebarExpanded: true,\n widgets: [\n { id: '1', type: 'chart', position: 'top-left' },\n { id: '2', type: 'table', position: 'top-right' },\n { id: '3', type: 'text', position: 'bottom-left' },\n ],\n notificationsEnabled: true,\n \/\/ ... y\u00fczlerce ba\u015fka ayar\n };\n\n \/\/ Kullan\u0131c\u0131n\u0131n daha \u00f6nceki ayarlar\u0131n\u0131 y\u00fckleyen ve birle\u015ftiren maliyetli bir fonksiyon\n const loadUserPreferences = () => {\n console.log(\"Kullan\u0131c\u0131 tercihleri y\u00fckleniyor ve birle\u015ftiriliyor...\");\n \/\/ Buras\u0131 bir localStorage okuma, bir API \u00e7a\u011fr\u0131s\u0131 veya\n \/\/ derin bir obje kopyalama ve birle\u015ftirme i\u015flemi olabilir.\n const storedPreferences = localStorage.getItem('userUISettings');\n let userPreferences = {};\n if (storedPreferences) {\n try {\n userPreferences = JSON.parse(storedPreferences);\n } catch (e) {\n console.error(\"Kullan\u0131c\u0131 tercihleri okunurken hata olu\u015ftu:\", e);\n }\n }\n \/\/ defaultSettings ile userPreferences'\u0131 derinlemesine birle\u015ftirme i\u015flemi\n \/\/ \u00d6rne\u011fin, lodash.merge gibi bir k\u00fct\u00fcphane kullan\u0131labilir.\n \/\/ Basit bir birle\u015ftirme sim\u00fclasyonu:\n const mergedSettings = { ...defaultUISettings, ...userPreferences };\n return mergedSettings;\n };\n\n function UserDashboard() {\n \/\/ Ba\u015flang\u0131\u00e7 UI durumunu maliyetli fonksiyonla ba\u015flat\n const [uiSettings, setUiSettings] = useState(loadUserPreferences);\n const [isEditing, setIsEditing] = useState(false);\n\n const toggleSidebar = () => {\n setUiSettings(prevSettings => ({\n ...prevSettings,\n sidebarExpanded: !prevSettings.sidebarExpanded\n }));\n };\n\n const saveSettings = () => {\n localStorage.setItem('userUISettings', JSON.stringify(uiSettings));\n alert('Ayarlar kaydedildi!');\n setIsEditing(false);\n };\n\n return (\n \n
Kullan\u0131c\u0131 Paneli Ayarlar\u0131<\/h2>\n Tema: {uiSettings.theme}<\/p>\n
Kenar \u00c7ubu\u011fu A\u00e7\u0131k: {uiSettings.sidebarExpanded ? 'Evet' : 'Hay\u0131r'}<\/p>\n Kenar \u00c7ubu\u011funu {uiSettings.sidebarExpanded ? 'Kapat' : 'A\u00e7'}<\/button>\n setIsEditing(!isEditing)}>{isEditing ? 'D\u00fczenlemeyi Bitir' : 'Ayarlar\u0131 D\u00fczenle'}<\/button>\n {isEditing && (\n \n
Widget Ayarlar\u0131<\/h3>\n \n {uiSettings.widgets.map(widget => (\n {widget.type} - {widget.position}<\/li>\n ))}\n <\/ul>\n Ayarlar\u0131 Kaydet<\/button>\n <\/div>\n )}\n <\/div>\n );\n }\n <\/pre>\n<\/code><\/p>\n
Bu \u00f6rnekte loadUserPreferences<\/code> fonksiyonu, localStorage'dan veri okuyup, varsay\u0131lan ayarlarla birle\u015ftirerek karma\u015f\u0131k bir UI durumu olu\u015fturur. Bu i\u015flem, \u00f6zellikle localStorage'da b\u00fcy\u00fck bir veri objesi varsa veya birle\u015ftirme mant\u0131\u011f\u0131 karma\u015f\u0131ksa, maliyetli olabilir. useState(loadUserPreferences)<\/code> kullanarak, bu birle\u015ftirme ve okuma i\u015flemi sadece bile\u015fen ilk kez y\u00fcklendi\u011finde ger\u00e7ekle\u015fir. Ard\u0131ndan isEditing<\/code> state'i de\u011fi\u015fti\u011finde veya toggleSidebar<\/code> fonksiyonu \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda bile\u015fen yeniden render olsa da, loadUserPreferences<\/code> tekrar \u00e7al\u0131\u015fmaz. Bu da kullan\u0131c\u0131 etkile\u015fimlerinin daha ak\u0131c\u0131 olmas\u0131n\u0131 ve panellerin an\u0131nda tepki vermesini sa\u011flar, b\u00f6ylece kullan\u0131c\u0131 deneyimi \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015fir.<\/p>\n\u0130leri D\u00fczey \u0130pu\u00e7lar\u0131 ve P\u00fcf Noktalar\u0131: Optimizasyon \u0130\u00e7in Daha Fazlas\u0131<\/h2>\n useState<\/code>'e fonksiyon ge\u00e7irme tekni\u011fini \u00f6\u011frendi\u011finize g\u00f6re, bu bilgiyi nas\u0131l daha da ileriye ta\u015f\u0131yabilece\u011finize dair baz\u0131 ipu\u00e7lar\u0131 ve s\u0131k\u00e7a yap\u0131lan hatalar\u0131 ele alal\u0131m. Bu b\u00f6l\u00fcmde, benzer g\u00f6r\u00fcnen ancak farkl\u0131 ama\u00e7lara hizmet eden fonksiyonel g\u00fcncelleme (functional updates) ile bu tekni\u011fi kar\u0131\u015ft\u0131rmamak, useMemo<\/code> ile olan ili\u015fkisi ve ne zaman bu optimizasyonun gerekli olup olmad\u0131\u011f\u0131n\u0131 anlamak gibi konulara odaklanaca\u011f\u0131z.<\/p>\nFonksiyonel G\u00fcncelleme (Functional Updates) ile Kar\u0131\u015ft\u0131rmay\u0131n<\/h3>\n useState<\/code> ile \u00e7al\u0131\u015f\u0131rken, bazen state'i g\u00fcncellemek i\u00e7in de bir fonksiyon ge\u00e7irebiliriz. Bu, \"fonksiyonel g\u00fcncelleme\" olarak adland\u0131r\u0131l\u0131r ve genellikle \u00f6nceki state de\u011ferine ba\u011f\u0131ml\u0131 bir g\u00fcncelleme yap\u0131ld\u0131\u011f\u0131nda kullan\u0131l\u0131r. \u00d6rne\u011fin:<\/p>\n\n function Counter() {\n const [count, setCount] = useState(0);\n\n const increment = () => {\n \/\/ \u00d6nceki state de\u011ferini kullanarak g\u00fcvenli g\u00fcncelleme\n setCount(prevCount => prevCount + 1);\n };\n\n return (\n \n
Count: {count}<\/p>\n Increment<\/button>\n <\/div>\n );\n }\n <\/pre>\n<\/code><\/p>\n
Bu \u00f6rnekte setCount(prevCount => prevCount + 1)<\/code> ifadesi, useState<\/code>'e ba\u015flang\u0131\u00e7 de\u011feri olarak bir fonksiyon ge\u00e7irmekten tamamen farkl\u0131d\u0131r. Fonksiyonel g\u00fcncelleme, state'i g\u00fcncelleyen setter<\/code> fonksiyonuna bir fonksiyon ge\u00e7irilmesini i\u00e7erir ve React bu fonksiyonu, \u00f6nceki state de\u011ferini arg\u00fcman olarak vererek \u00e7a\u011f\u0131r\u0131r. Bu, \u00f6zellikle birden fazla state g\u00fcncellemesinin ayn\u0131 anda ger\u00e7ekle\u015fti\u011fi durumlarda veya asenkron g\u00fcncellemelerde state tutars\u0131zl\u0131klar\u0131n\u0131 \u00f6nlemek i\u00e7in \u00f6nemlidir.<\/p>\nuseState<\/code>'e ba\u015flang\u0131\u00e7 de\u011feri olarak fonksiyon ge\u00e7irmek ise, sadece bile\u015fenin ilk kez render edilmesi an\u0131nda \u00e7al\u0131\u015f\u0131r ve state'in ilk de\u011ferini belirler. \u0130kisi de bir fonksiyon i\u00e7erse de, ama\u00e7lar\u0131 ve \u00e7al\u0131\u015ft\u0131klar\u0131 zaman dilimleri farkl\u0131d\u0131r. Ba\u015flang\u0131\u00e7 de\u011feri i\u00e7in olan, yaln\u0131zca bir kez \u00e7al\u0131\u015f\u0131r; fonksiyonel g\u00fcncelleme ise setter<\/code> her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r.<\/p>\nuseMemo ile Benzerlikler ve Farkl\u0131l\u0131klar<\/h3>\n Performans optimizasyonu denince akla gelen bir di\u011fer React Hook'u da useMemo<\/code>'dur. useMemo<\/code>, maliyetli bir hesaplaman\u0131n sonucunu \u00f6nbelle\u011fe almak (memoize etmek) i\u00e7in kullan\u0131l\u0131r, b\u00f6ylece ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fmedi\u011fi s\u00fcrece hesaplama tekrar yap\u0131lmaz.<\/p>\n\n import React, { useState, useMemo } from 'react';\n\n const calculateExpensiveValue = (a, b) => {\n console.log(\"useMemo hesaplamas\u0131 \u00e7al\u0131\u015f\u0131yor...\");\n \/\/ Karma\u015f\u0131k hesaplama\n return a * b * 100000;\n };\n\n function MyComponent({ propA, propB }) {\n \/\/ propA ve propB de\u011fi\u015fmedi\u011fi s\u00fcrece calculateExpensiveValue tekrar \u00e7al\u0131\u015fmaz\n const memoizedValue = useMemo(() => calculateExpensiveValue(propA, propB), [propA, propB]);\n const [count, setCount] = useState(0);\n\n return (\n \n
Memoized De\u011fer: {memoizedValue}<\/p>\n
Saya\u00e7: {count}<\/p>\n setCount(count + 1)}>Art\u0131r<\/button>\n <\/div>\n );\n }\n <\/pre>\n<\/code><\/p>\n
Peki, aradaki fark ne? useState<\/code>'e fonksiyon ge\u00e7irmek, yaln\u0131zca state'in ilk ba\u015flang\u0131\u00e7 de\u011ferini<\/strong> tek seferlik bir maliyetle hesaplamak i\u00e7indir. useMemo<\/code> ise, bile\u015fen her render oldu\u011funda, belirli ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fmedi\u011fi s\u00fcrece, herhangi bir maliyetli de\u011feri<\/strong> (state, prop, JSX eleman\u0131 vb.) \u00f6nbellekte tutmak i\u00e7in kullan\u0131l\u0131r. Yani, useMemo<\/code> daha genel bir memoization \u00e7\u00f6z\u00fcm\u00fcd\u00fcr ve bir state'in ilk de\u011ferinin \u00f6tesinde de kullan\u0131labilir. E\u011fer ba\u015flang\u0131\u00e7 state'i bir kere hesapland\u0131ktan sonra de\u011fi\u015fmiyorsa ve ba\u015fka bir yerde tekrar hesaplanmas\u0131na gerek yoksa, useState<\/code>'e fonksiyon ge\u00e7irmek en do\u011fru yakla\u015f\u0131md\u0131r. E\u011fer bir de\u011fer, bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca prop'lara veya ba\u015fka state'lere ba\u011fl\u0131 olarak dinamik olarak yeniden hesaplanabiliyorsa ve bu yeniden hesaplamay\u0131 sadece ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde yapmak istiyorsan\u0131z, useMemo<\/code> daha uygun bir se\u00e7enektir.<\/p>\nNe Zaman Kullanmal\u0131, Ne Zaman Gereksizdir?<\/h3>\n Her optimizasyon tekni\u011finde oldu\u011fu gibi, bu y\u00f6ntemin de ne zaman kullan\u0131laca\u011f\u0131n\u0131 iyi bilmek \u00f6nemlidir. Her useState<\/code> \u00e7a\u011fr\u0131s\u0131nda bir fonksiyon ge\u00e7irmek, basit de\u011ferler (0<\/code>, ''<\/code>, false<\/code>) i\u00e7in gereksiz yere kod karma\u015f\u0131kl\u0131\u011f\u0131 yarat\u0131r ve performans avantaj\u0131 sa\u011flamaz, hatta k\u00fc\u00e7\u00fck bir performans maliyeti bile olabilir (fonksiyon tan\u0131m\u0131n\u0131n kendisi). Bu tekni\u011fi kullanmak i\u00e7in ana kriter, ba\u015flang\u0131\u00e7 de\u011feri hesaplamas\u0131n\u0131n g\u00f6zle g\u00f6r\u00fcl\u00fcr derecede \"pahal\u0131\" olmas\u0131d\u0131r.<\/p>\n\nKullan\u0131m Gerektiren Durumlar:<\/strong>\n\nB\u00fcy\u00fck bir veri setini filtrelemek, s\u0131ralamak veya i\u015flemek.<\/li>\n Karma\u015f\u0131k bir obje veya dizi olu\u015fturmak, kopyalamak, birle\u015ftirmek.<\/li>\n localStorage<\/code> veya sessionStorage<\/code> gibi yerel depolardan b\u00fcy\u00fck verileri okumak ve parse etmek.<\/li>\nBir API yan\u0131t\u0131n\u0131 ilk kez i\u015flemek (\u00f6rne\u011fin, bir dizi transformasyonu).<\/li>\n \u00c7ok say\u0131da eleman\u0131n veya karma\u015f\u0131k yap\u0131n\u0131n varsay\u0131lan de\u011ferlerini hesaplamak.<\/li>\n<\/ul>\n<\/li>\n Gereksiz Oldu\u011fu Durumlar:<\/strong>\n\nSay\u0131lar, stringler, booleanlar gibi basit ilkel de\u011ferler (useState(0)<\/code>).<\/li>\nK\u00fc\u00e7\u00fck ve sabit diziler veya objeler (useState([])<\/code>, useState({})<\/code>).<\/li>\nA\u00e7\u0131k\u00e7a maliyetli olmayan herhangi bir hesaplama.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nUnutmay\u0131n, performans optimizasyonu her zaman bir denge meselesidir. Kodu a\u015f\u0131r\u0131 optimize etmek, okunabilirli\u011fi ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi olumsuz etkileyebilir. Bu nedenle, ger\u00e7ek bir performans darbo\u011faz\u0131 hissetti\u011finizde veya profilleyerek bir sorun tespit etti\u011finizde bu tekni\u011fi kullanman\u0131z en do\u011frusudur. Kodunuzu mobil uyumlu hale getirirken bu t\u00fcr performans optimizasyonlar\u0131 daha da \u00f6nem kazan\u0131r. \u00d6rne\u011fin, b\u00fcy\u00fck bir veri setini filtrelemek gibi maliyetli bir i\u015flem, mobil cihazlarda \u00e7ok daha belirgin bir tak\u0131lmaya neden olabilir. Bu nedenle, duyarl\u0131 tasar\u0131m yakla\u015f\u0131mlar\u0131n\u0131z\u0131 performans optimizasyonlar\u0131yla desteklemek her zaman ak\u0131ll\u0131ca olacakt\u0131r. \u0130\u015fte basit bir mobil uyumlu HTML \u00f6rne\u011fi:<\/p>\n
\n