{"id":36704,"date":"2025-12-21T21:40:48","date_gmt":"2025-12-21T18:40:48","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36704"},"modified":"2025-12-21T21:40:48","modified_gmt":"2025-12-21T18:40:48","slug":"react-usememo-hookunu-anlamak-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-usememo-hookunu-anlamak-kapsamli-bir-rehber\/","title":{"rendered":"React useMemo Hook’unu Anlamak: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

<\/p>\n

React useMemo Hook’unu Anlamak: Kapsaml\u0131 Bir Rehber<\/h2>\n

Giri\u015f<\/h3>\n

Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren karma\u015f\u0131k aray\u00fczler ve etkile\u015fimlerle doludur. React gibi k\u00fct\u00fcphaneler, bu karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netilebilir hale getirmek i\u00e7in bile\u015fen tabanl\u0131 bir mimari sunar. Ancak, uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e ve bile\u015fenleriniz daha fazla veri i\u015fledik\u00e7e, performans darbo\u011fazlar\u0131 ka\u00e7\u0131n\u0131lmaz hale gelebilir. Gereksiz yere tekrarlanan hesaplamalar veya bile\u015fenlerin a\u015f\u0131r\u0131 yeniden render edilmesi, uygulaman\u0131z\u0131n yava\u015flamas\u0131na ve kullan\u0131c\u0131 deneyiminin olumsuz etkilenmesine yol a\u00e7abilir. \u0130\u015fte tam bu noktada, React’in performans optimizasyon ara\u00e7lar\u0131 devreye girer. Bu ara\u00e7lardan biri de useMemo<\/code> hook’udur.<\/p>\n

useMemo<\/code> hook’u, React uygulamalar\u0131ndaki pahal\u0131 hesaplamalar\u0131n sonu\u00e7lar\u0131n\u0131 \u00f6nbelle\u011fe alarak (memoize ederek) performans\u0131 art\u0131rmak i\u00e7in tasarlanm\u0131\u015f g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu makalede, useMemo<\/code>‘nun ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, hangi durumlarda kullan\u0131lmas\u0131 gerekti\u011fini, potansiyel avantajlar\u0131n\u0131 ve dezavantajlar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Ayr\u0131ca, useMemo<\/code> ile ilgili yayg\u0131n hatalara ve en iyi uygulama y\u00f6ntemlerine de de\u011finece\u011fiz. Amac\u0131m\u0131z, geli\u015ftiricilere useMemo<\/code>‘yu ne zaman ve nas\u0131l etkili bir \u015fekilde kullanacaklar\u0131 konusunda kapsaml\u0131 bir anlay\u0131\u015f kazand\u0131rmakt\u0131r.<\/p>\n

React’in Performans Sorunlar\u0131 ve Optimizasyon \u0130htiyac\u0131<\/h3>\n

React, kullan\u0131c\u0131 aray\u00fczlerini olu\u015fturmak i\u00e7in “Virtual DOM” ad\u0131 verilen bir mekanizma kullan\u0131r. Bir bile\u015fenin durumu veya prop’lar\u0131 de\u011fi\u015fti\u011finde, React bu bile\u015feni ve onun alt bile\u015fenlerini yeniden render etmeye karar verir. Bu yeniden render s\u00fcreci, Virtual DOM \u00fczerinde yeni bir a\u011fa\u00e7 olu\u015fturulmas\u0131n\u0131, bu yeni a\u011fac\u0131n bir \u00f6ncekiyle kar\u015f\u0131la\u015ft\u0131r\u0131lmas\u0131n\u0131 (diffing) ve ger\u00e7ek DOM’a yaln\u0131zca gerekli de\u011fi\u015fikliklerin uygulanmas\u0131n\u0131 (reconciliation) i\u00e7erir. React’in bu ak\u0131ll\u0131 algoritmas\u0131 \u00e7o\u011fu zaman yeterince h\u0131zl\u0131 olsa da, baz\u0131 senaryolarda performans sorunlar\u0131na yol a\u00e7abilir:<\/p>\n

* Pahal\u0131 Hesaplamalar:<\/strong> Bir bile\u015fenin render d\u00f6ng\u00fcs\u00fc s\u0131ras\u0131nda b\u00fcy\u00fck veri setleri \u00fczerinde filtreleme, s\u0131ralama, haritalama gibi yo\u011fun CPU gerektiren i\u015flemler yapmas\u0131. Bu t\u00fcr hesaplamalar her renderda tekrarlan\u0131rsa, uygulama yava\u015flayabilir.
\n* Gereksiz Alt Bile\u015fen Yeniden Renderlar\u0131:<\/strong> Bir \u00fcst bile\u015fen yeniden render edildi\u011finde, varsay\u0131lan olarak t\u00fcm alt bile\u015fenleri de yeniden render edilir. E\u011fer bir alt bile\u015fenin prop’lar\u0131 de\u011fi\u015fmemi\u015f olsa bile, \u00fcst bile\u015fenin yeniden render olmas\u0131 nedeniyle alt bile\u015fen de yeniden render edilirse, bu durum gereksiz i\u015flem y\u00fck\u00fcne neden olur. \u00d6zellikle alt bile\u015fenler karma\u015f\u0131k DOM yap\u0131lar\u0131 olu\u015fturuyorsa veya kendi i\u00e7inde pahal\u0131 hesaplamalar yap\u0131yorsa bu sorun daha belirgin hale gelir.
\n* Referans E\u015fitli\u011fi Sorunlar\u0131:<\/strong> JavaScript’te nesneler ve diziler referans tipindedir. \u0130ki nesne veya dizi, i\u00e7erikleri ayn\u0131 olsa bile, bellekte farkl\u0131 referanslara sahipse React bunlar\u0131 farkl\u0131 olarak alg\u0131lar. Bir \u00fcst bile\u015fen, alt bile\u015fenine her renderda yeni bir nesne veya dizi prop’u olu\u015fturup g\u00f6nderirse (i\u00e7eri\u011fi ayn\u0131 olsa bile), alt bile\u015fen bu prop’un de\u011fi\u015fti\u011fini d\u00fc\u015f\u00fcnerek gereksiz yere yeniden render edilebilir. Bu durum, \u00f6zellikle React.memo<\/code> ile optimize edilmi\u015f alt bile\u015fenlerin beklenen \u015fekilde \u00e7al\u0131\u015fmamas\u0131na neden olabilir.<\/p>\n

Bu t\u00fcr performans darbo\u011fazlar\u0131n\u0131 a\u015fmak i\u00e7in React, geli\u015ftiricilere useMemo<\/code> ve useCallback<\/code> gibi hook’lar sunar. Bu hook’lar, belirli de\u011ferleri veya fonksiyonlar\u0131 memoize ederek (\u00f6nbelle\u011fe alarak), yaln\u0131zca ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde yeniden hesaplanmalar\u0131n\u0131 sa\u011flar.<\/p>\n

useMemo<\/code> Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n

useMemo<\/code> (memoization’dan gelir), React’te bir de\u011ferin memoize edilmesini sa\u011flayan bir hook’tur. Yani, belirli bir hesaplaman\u0131n sonucunu \u00f6nbelle\u011fe al\u0131r ve yaln\u0131zca o hesaplaman\u0131n ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde yeniden hesaplar. Aksi takdirde, \u00f6nbelle\u011fe al\u0131nm\u0131\u015f de\u011feri do\u011frudan d\u00f6nd\u00fcr\u00fcr. Bu, \u00f6zellikle pahal\u0131 veya yo\u011fun CPU gerektiren hesaplamalar\u0131n gereksiz yere tekrarlanmas\u0131n\u0131 \u00f6nleyerek uygulaman\u0131n performans\u0131n\u0131 art\u0131r\u0131r.<\/p>\n

S\u00f6zdizimi<\/h4>\n

useMemo<\/code>‘nun temel s\u00f6zdizimi a\u015fa\u011f\u0131daki gibidir:<\/p>\n

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);<\/code><\/pre>\n
Bu s\u00f6zdizimi iki ana arg\u00fcman al\u0131r:<\/p>\n
1.  create<\/code> fonksiyonu (callback):<\/strong> Bu, memoize etmek istedi\u011finiz de\u011feri d\u00f6nd\u00fcren bir fonksiyondur. React, ilk render s\u0131ras\u0131nda bu fonksiyonu \u00e7a\u011f\u0131r\u0131r ve sonucunu \u00f6nbelle\u011fe al\u0131r. Sonraki render’larda, e\u011fer ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fmemi\u015fse, bu fonksiyon tekrar \u00e7a\u011fr\u0131lmaz; bunun yerine \u00f6nbelle\u011fe al\u0131nm\u0131\u015f de\u011fer d\u00f6nd\u00fcr\u00fcl\u00fcr.
\n2.  dependencies<\/code> dizisi:<\/strong> Bu, create<\/code> fonksiyonunun ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 i\u00e7eren bir dizidir. React, her render’da bu dizideki de\u011ferlerin bir \u00f6nceki render’daki de\u011ferlerle referans e\u015fitli\u011fini kontrol eder. E\u011fer dizideki herhangi bir de\u011fer de\u011fi\u015fmi\u015fse, create<\/code> fonksiyonu yeniden \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r ve yeni sonu\u00e7 \u00f6nbelle\u011fe al\u0131n\u0131r. E\u011fer hi\u00e7bir de\u011fer de\u011fi\u015fmemi\u015fse, React \u00f6nbelle\u011fe al\u0131nm\u0131\u015f de\u011feri d\u00f6nd\u00fcr\u00fcr. Bo\u015f bir dizi ([]<\/code>) verilirse, create<\/code> fonksiyonu yaln\u0131zca ilk render’da \u00e7al\u0131\u015f\u0131r ve sonraki render’larda her zaman ayn\u0131 \u00f6nbelle\u011fe al\u0131nm\u0131\u015f de\u011feri d\u00f6nd\u00fcr\u00fcr (ba\u011f\u0131ml\u0131l\u0131klar\u0131 hi\u00e7 de\u011fi\u015fmeyece\u011fi i\u00e7in).<\/p>\n
Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
Bir bile\u015fen ilk kez render edildi\u011finde, useMemo<\/code> i\u00e7indeki create<\/code> fonksiyonu \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r ve d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011fer React taraf\u0131ndan bellekte saklan\u0131r.
\nSonraki her render’da, React dependencies<\/code> dizisindeki her bir eleman\u0131n bir \u00f6nceki render’daki kar\u015f\u0131l\u0131\u011f\u0131yla referans e\u015fitli\u011fini (shallow comparison) kontrol eder.
\n*   E\u011fer dependencies<\/code> dizisindeki hi\u00e7bir eleman de\u011fi\u015fmemi\u015fse, React create<\/code> fonksiyonunu \u00e7al\u0131\u015ft\u0131rmaz ve daha \u00f6nce \u00f6nbelle\u011fe ald\u0131\u011f\u0131 de\u011feri d\u00f6nd\u00fcr\u00fcr.
\n*   E\u011fer dependencies<\/code> dizisindeki bir veya daha fazla eleman de\u011fi\u015fmi\u015fse, React create<\/code> fonksiyonunu yeniden \u00e7al\u0131\u015ft\u0131r\u0131r, yeni de\u011feri \u00f6nbelle\u011fe al\u0131r ve bu yeni de\u011feri d\u00f6nd\u00fcr\u00fcr.<\/p>\n
Bu mekanizma sayesinde, pahal\u0131 hesaplamalar yaln\u0131zca ger\u00e7ekten ihtiya\u00e7 duyuldu\u011funda (yani ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde) ger\u00e7ekle\u015ftirilir.<\/p>\n
useMemo<\/code> Kullan\u0131m Senaryolar\u0131 ve \u00d6rnekler<\/h3>\n
useMemo<\/code>‘nun en yayg\u0131n kullan\u0131m alanlar\u0131n\u0131 ve bunlara ili\u015fkin kod \u00f6rneklerini inceleyelim.<\/p>\n
1. Pahal\u0131 Hesaplamalar\u0131n Memoizasyonu<\/h4>\n
Bir bile\u015fenin render d\u00f6ng\u00fcs\u00fc i\u00e7inde yo\u011fun CPU gerektiren bir i\u015flem yapmas\u0131 gerekti\u011finde useMemo<\/code> \u00e7ok faydal\u0131d\u0131r.<\/p>\n
\u00d6rnek:<\/strong> B\u00fcy\u00fck bir diziyi filtrelemek veya d\u00f6n\u00fc\u015ft\u00fcrmek.<\/p>\n
import React, { useState, useMemo } from 'react';\n\nconst data = Array.from({ length: 10000 }, (_, i) => ({\n  id: i,\n  value: Math.random() * 1000,\n  name: Item ${i}<\/code>,\n  isEven: i % 2 === 0\n}));\n\nfunction ExpensiveCalculationComponent() {\n  const [filterText, setFilterText] = useState('');\n  const [count, setCount] = useState(0);\n\n  \/\/ useMemo OLMADAN: Her render'da (filterText veya count de\u011fi\u015fse bile) yeniden hesaplan\u0131r.\n  \/\/ const filteredData = data.filter(item =>\n  \/\/   item.name.toLowerCase().includes(filterText.toLowerCase())\n  \/\/ );\n\n  \/\/ useMemo \u0130LE: Sadece filterText de\u011fi\u015fti\u011finde yeniden hesaplan\u0131r.\n  const filteredData = useMemo(() => {\n    console.log('Filtreleme i\u015flemi yap\u0131l\u0131yor...'); \/\/ Bu mesaj sadece ba\u011f\u0131ml\u0131l\u0131k de\u011fi\u015fti\u011finde g\u00f6r\u00fcn\u00fcr\n    return data.filter(item =>\n      item.name.toLowerCase().includes(filterText.toLowerCase())\n    );\n  }, [filterText]); \/\/ Ba\u011f\u0131ml\u0131l\u0131k: filterText\n\n  return (\n    
\n      
Pahal\u0131 Hesaplama \u00d6rne\u011fi<\/h3>\n       setFilterText(e.target.value)}\n      \/>\n