{"id":19598512,"url":"https://github.com/kaplanh/memo-usememo-useref-usecallback","last_synced_at":"2026-05-15T10:33:45.079Z","repository":{"id":224984387,"uuid":"764209539","full_name":"kaplanh/memo-useMemo-useRef-useCallback","owner":"kaplanh","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-28T17:25:49.000Z","size":629,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T15:16:04.093Z","etag":null,"topics":["react","react-memo","usecallback-hook","usememo-hooks","useref-hook"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaplanh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-27T17:12:41.000Z","updated_at":"2024-02-27T17:14:51.000Z","dependencies_parsed_at":"2024-02-28T18:50:35.081Z","dependency_job_id":null,"html_url":"https://github.com/kaplanh/memo-useMemo-useRef-useCallback","commit_stats":null,"previous_names":["kaplanh/memo-usememo-useref-usecallback"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kaplanh/memo-useMemo-useRef-useCallback","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Fmemo-useMemo-useRef-useCallback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Fmemo-useMemo-useRef-useCallback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Fmemo-useMemo-useRef-useCallback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Fmemo-useMemo-useRef-useCallback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaplanh","download_url":"https://codeload.github.com/kaplanh/memo-useMemo-useRef-useCallback/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Fmemo-useMemo-useRef-useCallback/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33063275,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-15T02:00:06.351Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-memo","usecallback-hook","usememo-hooks","useref-hook"],"created_at":"2024-11-11T09:06:32.614Z","updated_at":"2026-05-15T10:33:45.040Z","avatar_url":"https://github.com/kaplanh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Memo-useMemo-useCallback-useRef\nÖncelikle şunu belirteyim, memoization kullandığımız programlama diline ait bir yapı değil, bir optimizasyon tekniği. Yani ben örneklerimi JavaScript ile yazacak olsam da siz bu tekniği istediğiniz dilde kullanabilirsiniz.\n\nÖzetle memoization pahalı işlemler yapan fonksiyonlarımızda sonuçları cacheleyerek aynı inputu tekrar verdiğimizde aynı pahalı işlemi tekrar yapmadan cacheten çağırarak bize daha iyi performans sağlayan bir yöntem. Tabi burada gözardı edilmemesi gereken bir diğer husus da bu sonuçları depolamanın da bir maliyeti var. Burada iyi düşünüp, hesap edip doğru kararı kendimize göre vermeliyiz. Buradaki pahalı fonksiyonları biraz daha anlaşılır hale getirmek istersek yoğun hesaplamalar yapan veya recursive çalışan fonksiyonlar olarak düşünebiliriz. Günümüz koşullarında performansı harcadığımız zaman ve tükettiğimiz bellek üzerinden değerlendirirsek aslında memoization bize bunları minimum seviyede kullanma imkanı veriyor.\n\n## React Memo\nEğer bir component React.memo ile çağrılırsa, React bu component’i render eder ve bu component’e gönderilen props değerlerini saklar/kaydeder (memoized). Bir sonraki render durumunda bu component’e gönderilen props değerleri, bir önceki render edildiğindeki props değerleri ile aynıysa component tekrar render edilmez.\nReact.memo, React bileşenlerinin performansını artırmak için kullanılan bir optimizasyon teknolojisidir. Bu yöntem, aynı girdilerle yeniden renderelemeyi önlemek için bir bileşeni önbelleğe alır. Ve genellikle kullanmakta bir sakınca yoktur. Ancak, bazı durumlarda, gereksiz yere React.memo kullanmak uygulamanın boyutunu artırabilir ve performansını olumsuz yönde etkileyebilir.\n\nReact.memo'nun kullanılması, özellikle büyük ve karmaşık uygulamalarda, uygun bir şekilde yönetilmediğinde, gereksiz yere bellek kullanımına neden olabilir. Bu nedenle, uygulama ölçeğine bağlı olarak React.memo kullanımının dikkatli bir şekilde planlanması ve yönetilmesi önemlidir.\n\n\n React.memo’yu kullanmanın birkaç farklı yolu bulunmaktadır:\n\n```\n1.yol\nimport React from 'react';\n\nconst Header = React.memo((props) =\u003e {\n    console.log(\"Render =\u003e HeaderMemo Components\")\n  return (\n    \u003cdiv className='bg-danger text-center'\u003eHeaderMemo Componenti : {count}\u003c/div\u003e\n  )\n})\n\nexport default Header;\n\n2.yol \nimport React,{memo} from 'react'\n\nconst HeaderMemo = ({count}) =\u003e {\n  console.log(\"Render =\u003e HeaderMemo Components\")\n  return (\n    \u003cdiv className='bg-danger text-center'\u003eHeaderMemo Componenti : {count}\u003c/div\u003e\n  )\n}\n\nexport default memo(HeaderMemo)\n\n\nCount değerini değiştirdiğimiz zaman App component’i tekrar render edilmesine rağmen, içerisinde bulunan Header component’i tekrar render edilmedi. Bunun sebebi de yukarıda belirttiğim gibi, eğer component’e gönderilen props değerleri component render edildiği zaman bir önceki props değerleri ile aynıysa component’in render edilmesi pas geçilir. Böylelikle Header component’ine gönderilen props değerleri değişene kadar tekrar render edilmez.\n```\n\n## UseRef Hook Nedir?\nUseRef Hook, React fonksiyonel bileşenlerindeki mutable değişkenlerin (state) korunmasına ve yönetilmesine olanak tanıyan bir kancadır. UseRef Hook, bir değişkenin ömrü boyunca sabit kalmasını sağlayarak değişkenin herhangi bir güncellemesi yapılırken bile bileşenin yeniden render edilmesini önler.\n\nUseRef Hook Nasıl Kullanılır?\nUseRef Hook, useRef() fonksiyonu kullanılarak oluşturulur ve ardından döndürülen referans bir değişkende depolanır. Bu referans, sonraki render çağrıları sırasında aynı öğeyi işaret eder.\n\n```javascript\nCopy code\nimport React, { useRef } from 'react';\n\nfunction Example() {\n  const inputRef = useRef(null);\n\n  function handleClick() {\n    inputRef.current.focus();\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput type=\"text\" ref={inputRef} /\u003e\n      \u003cbutton onClick={handleClick}\u003eOdaklan\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\nYukarıdaki örnekte, bir inputRef adlı bir değişken oluşturuyoruz ve bu değişkeni \u003cinput\u003e öğesine bir referans olarak aktarıyoruz. Daha sonra handleClick fonksiyonunda, inputRef.current kullanılarak giriş öğesine odaklanılıyor.\n\nUseRef Hook Kullanım Alanları\nUseRef Hook, bazı durumlarda özellikle yararlıdır:\n\nÖğe odaklanma: Yukarıdaki örnekte olduğu gibi, UseRef Hook'un en yaygın kullanım alanı, bir öğeyi odaklamak ve yönetmektir.\nAnimasyonlar: Animasyonlar gibi performans açısından yoğun işlemler, UseRef Hook kullanarak React fonksiyonel bileşenlerinin yeniden render edilmesini önleyebilir.\nVeri kaydetme: UseRef Hook, bir fonksiyonel bileşen içindeki verilerin önbelleğe alınmasına ve gerektiğinde erişilmesine olanak tanır.\n\n- useRef hook’u ile;\n\nDOM node’larına veya React elementlerine erişebiliriz.\nMutable değişkenler tutabiliriz.\nVanilla Javascript ile yazılmış kütüphaneleri React’a uyarlarken faydalanabiliriz.\nuseRef hook’u kullanırken bunları dikkat etmeliyiz;\n\nuseRef ile oluşturulan bir ref sadece component oluştuğunda (onMount) oluşturulur ve tüm lifecycle’ı boyunca korunur.\nBir ref’i güncellemek “side effect” oluşturacağı için sadece useEffect, useLayoutEffect veya bir event handler içerisinde güncellenmelidir.\n#### UseRef Hook ile UseState Hook Arasındaki Fark\nUseRef Hook ve UseState Hook, React'ta durum yönetimi için iki farklı kancadır. UseState Hook, bileşenlerin durumunu yönetmek için kullanılırken, UseRef Hook, mutable değişkenlerin saklanması için kullanılır. UseState Hook, state değişikliklerine tepki vererek bileşenleri yeniden render ederken, UseRef Hook, bileşenlerin yeniden render edilmesini önleyerek performansı artırır.\n\nSonuç\nUseRef Hook, React fonksiyonel bileşenlerinde mutable değişkenlerin saklanması ve yönetilmesi için kullanılan yararlı bir kancadır. UseRef Hook, özellikle öğe odaklama, animasyonlar ve veri kaydetme gibi durumlarda yararlıdır. UseRef Hook, UseState Hook ile karıştırılmamalıdır, çünkü ikisi farklı amaçlar için tasarlanmıştır.\n\nBir değişken değiştiğinde useState component’in tekrar render olmasını tetikler useRef component’in tekrar render olmasını tetiklemez.\n\n\n## useMemo Hook Nedir?\nuseMemo Hook, React fonksiyonel bileşenlerinde performans optimizasyonu sağlamak için kullanılan bir kancadır. useMemo Hook, hesaplama maliyeti yüksek olan fonksiyonların sonuçlarını önbelleğe alır ve aynı girdilerle yeniden çağrıldığında önbelleğe alınmış sonuçları döndürür.\n\n- useMemo Hook Nasıl Kullanılır?\n\nuseMemo Hook, useMemo() fonksiyonu kullanılarak oluşturulur ve hesaplanacak değeri hesaplamak için bir işlev alır. Daha sonra, önbelleğe alınacak girdileri belirtmek için bir dizi bağımlılık (dependency) sağlanabilir. Eğer bağımlılıklar değişmezse, önbelleğe alınmış sonuç tekrar kullanılır.\n\n```javascript\nimport React, { useMemo } from 'react';\n\nfunction Example() {\n  ...\n  const filteredData = useMemo(() =\u003e {\n    console.log(\"useMemo çalıştı\");\n    return data?.filter((item) =\u003e\n      item.name.toLowerCase().includes(search.toLowerCase())\n    );\n  }, [data, search]);\n\n  return \u003cdiv\u003e...\u003c/div\u003e;\n}\n```\nYukarıdaki örnekte, data ve search adlı değişkenler girdi olarak veriliyor ve bir array döndürlüyor. useMemo() kullanarak hesaplama(filtreleme) önbelleğe alınır ve sadece data veya seacrh bağımlılığı değiştiğinde hesaplama yeniden yapılır.\n\n- useMemo Hook Kullanım Alanları\n\nuseMemo Hook, özellikle aşağıdaki durumlarda yararlıdır:\n\nHesaplama maliyeti yüksek olan işlemler: Örneğin, büyük bir veri kümesinde filtreleme veya sıralama yapmak gibi maliyetli hesaplamalar.\nKarmaşık hesaplamalar: Örneğin, bir matematiksel işlevin sonucunu hesaplamak gibi karmaşık hesaplamalar.\n\n- Sonuç\n\nuseMemo Hook, hesaplama maliyeti yüksek olan fonksiyonların sonuçlarını önbelleğe alarak React fonksiyonel bileşenler içinde performans optimizasyonu sağlar. useMemo Hook, bir işlevi önbelleğe alır ve aynı girdilerle tekrar çağrıldığında önbelleğe alınmış sonucu döndürür. useMemo Hook, özellikle hesaplama maliyeti yüksek olan işlemler veya karmaşık hesaplamalar için yararlıdır. useCallback Hook ile karıştırılmamalıdır, çünkü useCallback Hook, bir işlevi önbelleğe alır ve aynı işlevi tekrar çağrıldığında önbelleğe alınmış işlevi döndürür.\n\nInput alanına bir değer girdiğimiz zaman seacrh state i güncelleniyor bundan dolayı App.js tekrar render edildiği için filteredData tekrar oluşur. filteredData tekrardan oluştuğu için Card componentine göndermiş olduğumuz data her seferinde farklı bir adrese sahip olur. Bu yüzdende React.memo Card componentine ilk seferde göndermiş olduğumuz data array’inin tutulduğu adres ile render edildikten sonra gelen data array’inin farklı adreste bulunduğunu gördüğü için CArd componentini tekrar render eder. Props olarak verdiğimiz array değişmediği halde Card componentinin render edilmesini engelleyebilmek için useMemo kullanıyoruz.\n\n\n- useMemo Ne Zaman Kullanılmalı?\n\nuseMemo ile fonksiyonlardan dönen değerler memoized edilir. Genellikle expensive dediğimiz durumlarda kullanılır. Örneğin fonksiyon çağrıldığı zaman çok fazla memory tüketen bir durumu düşünebilirsiniz. Çağırdığınız zaman fazla memory kullanımında bulunan bir fonksiyonunuz varsa, useMemo kullanabilirsiniz.\n\n\n## useCallback Hook Nedir?\nuseCallback Hook, React'ta performans optimizasyonu sağlamak için kullanılan bir kancadır. useCallback Hook, bir işlevi önbelleğe alır ve aynı referansla tekrar çağrıldığında önbelleğe alınmış işlevi döndürür. Bu, gereksiz yere yeniden render etmenin önüne geçer ve performansı arttırır.\n\nuseCallback Hook Nasıl Kullanılır?\nuseCallback Hook, useCallback() fonksiyonu kullanılarak oluşturulur ve önbelleğe alınacak işlevi içeren bir fonksiyon alır. Daha sonra, önbelleğe alınacak girdileri belirtmek için bir dizi bağımlılık (dependency) sağlanabilir. Eğer bağımlılıklar değişmezse, önbelleğe alınmış işlev tekrar kullanılır.\n\n\n```javascript\nCopy code\nimport React, { useCallback } from 'react';\n\nfunction Example({ onClick }) {\n\n  const handleClear = useCallback(() =\u003e {\n    setText(\"\");\n    setSearch(\"\");\n  }, []);\n\n  return ....;\n}\n```\nYukarıdaki örnekte, handleClear adlı bir işlev önbelleğe alınıyor. useCallback() kullanarak işlev önbelleğe alınır ve dependency boş olduğu için sadece başlangıçta oluşturulur ve yeri sabit kalır.\n\nApp.js te eyr alana örneğimizde input alanına girdiğimiz her bir karakter sonucunda App.js render edildiği için ClearButton component’i de tekrar render edilmektedir. Bunun sebebi ClearButton componentimize props olarak göndermiş olduğumuz handleClear fonksiyonu, App.js tekrar render edildiği için tekrar oluşmaktadır. JavaScript’te fonksiyonlarda Object tipindedir. useMemoda belirttiğim gibi, Object tipinde gönderilen props’larda React.memo referans karşılaştırması yaptığı için bir önceki render edildiğinde gönderilen memory adresi ile bir sonraki renderda gönderilen adres değerleri farklı olduğu için ClearButton componenti tekrar render edilir.\nuseCallback ile bir fonksiyonu memoized edebiliriz. Memoized edilen bu fonksiyon sadece bağımlı olduğu değerlerin (dependency list) değişmesi durumunda tekrardan oluşturulur.\n\n- useCallback Hook Kullanım Alanları\n\nuseCallback Hook, özellikle aşağıdaki durumlarda yararlıdır:\n\nÇocuk bileşenlere geçirilen işlevler: useCallback Hook, bir işlevin sürekli olarak yeniden oluşturulmasını önler ve gereksiz renderlemeyi engeller.\nBağımlılıkları değişmeyen işlevler: useCallback Hook, bağımlılıkları değişmeyen işlevleri önbelleğe alarak gereksiz renderlemeyi engeller.\n\nSonuç\nuseCallback Hook, bir işlevi önbelleğe alarak aynı işlevi tekrar çağrıldığında önbelleğe alınmış işlevi döndürerek React uygulamalarındaki performansı arttırır. useCallback Hook, özellikle çocuk bileşenlere geçirilen işlevler ve bağımlılıkları değişmeyen işlevler için yararlıdır. useMemo Hook ile useCallback Hook arasındaki farkı anlamak da önemlidir, çünkü bu iki kancanın farklı kullanım alanları vardır.\n\nuseCallback\nReturns a memoized callback.\n\n#### useMemo Hook ile useCallback Hook Arasındaki Fark\n\nuseMemo Hook ve useCallback Hook, React'ta performans optimizasyonu için iki farklı kancadır. useMemo hooku useCallback ile çok benzer olup tek farkı geriye memoized bir fonksiyon değil o fonksiyonun döndürdüğü değerleri döndürür.\n\nEvet gerçekten de yaptığı tam olarak bu. useCallback parametre olarak bir fonksiyon ve dependency array alıyor ve dependency array içerisindeki değerler değişmediği sürece parametre olarak aldığı fonksiyonu return ediyor.\nFakat bunu yapması bizim ne işimize yarıyor gelin önce ona bakalım. JavaScript’te fonksiyonlar first-class citizen olarak geçer yani her fonksiyon aslında bir nesnedir. Dolayısıyla birebir aynı fonksiyonları birbirine eşitliğini kontrol ettiğimizde de alacağımız sonuç false olur.\n\nuseCallback Hook, bir işlevi önbelleğe alır ve aynı referansla tekrar çağrıldığında önbelleğe alınmış işlevi döndürür. \nuseMemo Hook ise hesaplamaları önbelleğe alır ve sonuçları döndürür. useCallback Hook, özellikle bir işlevin çocuk bileşenlere geçirilmesi gerektiğinde yararlıdır, useMemo Hook ise hesaplama maliyeti yüksek olan değerlerin saklanması için kullanılır.\n\n\n\n- react memo, usememo, usecallback,useref bunları ne zaman kullanmamalıyım\n\nAşağıdaki durumlarda, ilgili React hook'larını kullanmamak daha uygun olabilir:\n\nReact.memo: Bileşenin yeniden render edilmesi çok ucuzsa ve performans sorunları beklemiyorsanız, özellikle bileşen çok basitse, React.memo kullanmanız gerekli olmayabilir.\nuseMemo: İşlem maliyeti düşük olan ve yalnızca birkaç kez hesaplanması gereken işlemler için, özellikle uygulamanız küçükse ve performans sorunları beklemiyorsanız useMemo kullanmanız gerekli olmayabilir. Ayrıca, hafıza kullanımı için de dikkatli olmanız gerekir, çünkü useMemo bellekteki bir değeri önbelleğe alır ve gereksiz yere çok fazla bellek kullanımına neden olabilir.\nuseCallback: Bir işlevin her çağrısında yeni bir işlev referansı oluşturmanız gerekiyorsa ve performans sorunları beklemiyorsanız useCallback kullanmanız gerekli olmayabilir. Ayrıca, useCallback kullanmanın işlevin karmaşıklığını artırabileceğini ve kodun okunabilirliğini azaltabileceğini de unutmayın.\nuseRef: Ref nesneleri genellikle, bir öğenin iç durumunu doğrudan değiştirmek veya elde etmek gibi durumlarda kullanılır. Ancak, örneğin, DOM düğümlerine erişmek yerine, bileşenlerin doğrudan işlevler aracılığıyla erişilebilen prop'lara veya durumlarına dayandığı durumlarda useRef kullanmanız gerekli olmayabilir.\n\n\n###### React'in useCallback Hook'unu React'in useMemo Hook'u ile karıştırmayalım. useCallback, işlevleri hafızaya almak için kullanılırken, useMemo, değerleri hafızaya almak için kullanılır.\n\n## API \n[dummyJSON API](\"https://dummyjson.com/products)\n\n###### React'in useCallback Hook'unu React'in memo API'si ile karıştırmayalım. useCallback, işlevleri not almak için kullanılırken, React memo, yeniden oluşturmaları önlemek için React bileşenlerini sarmak için kullanılır.\n\n###### React'in useRef Hook'unu React'in useState hooku ile karıştırmayalım. useRef, component’in tekrar render olmasını tetiklemez, useState, bir değişken değiştiğinde useState component’in tekrar render olmasını tetikler.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Fmemo-usememo-useref-usecallback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaplanh%2Fmemo-usememo-useref-usecallback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Fmemo-usememo-useref-usecallback/lists"}