{"id":734,"date":"2022-08-08T00:14:30","date_gmt":"2022-08-08T00:14:30","guid":{"rendered":"https:\/\/okankaradag.com\/?p=734"},"modified":"2022-08-08T00:14:31","modified_gmt":"2022-08-08T00:14:31","slug":"usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir","status":"publish","type":"post","link":"https:\/\/okankaradag.com\/en\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir","title":{"rendered":"What are useCallBack, useMemo and useEffect? How to and When use? What are the difference?"},"content":{"rendered":"

Reactjs hooklar\u0131ndan useCallback, useEffect <\/strong>ve useMemo <\/strong>hooklar\u0131 zaman zaman birbiriyle kar\u0131\u015fan hookslard\u0131r. Bu \u00fc\u00e7 hooksun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve ne zaman kullan\u0131laca\u011f\u0131n\u0131 inceleyece\u011fiz.<\/p>\n\n\n\n

useEffect<\/h5>\n\n\n\n

useEffect Component i\u00e7indeki state, props<\/strong> gibi varl\u0131klar render olduktan sonra tetiklenen bir fonksiyondur. Bu tetiklenmeyi bir dizi i\u00e7indeki verilen varl\u0131klara g\u00f6re yapar.<\/p>\n\n\n\n

En basit kullan\u0131m\u0131 a\u015fa\u011f\u0131daki \u015fekildedir. Counter state’i her de\u011fi\u015fim sonras\u0131 tetiklenecektir. \u00d6nceki de\u011feriyle yeni de\u011feri ayn\u0131 ise render olmayacakt\u0131r.<\/p>\n\n\n\n

const [counter, setCounter] = useState(0);\nuseEffect(() => {\n  console.log(\"handle change\")\n},[counter])<\/pre><\/div>\n\n\n\n
Depedency array<\/strong> i\u00e7ine fonksiyon eklenmesi durumunda o fonksiyonun her \u00e7a\u011fr\u0131lmas\u0131nda tetiklenir.<\/p>\n\n\n\n
const [counter, setCounter] = useState(0);\nconst handleChange = () => {\n  setCounter(counter + 1);\n}\nuseEffect(() => {\n  console.log(\"handle change\")\n},[handleChange])<\/pre><\/div>\n\n\n\n
Array bo\u015f olmas\u0131 durumunda ba\u011fl\u0131 oldu\u011fu component render olduktan sonra tetiklenir. \u00d6nce return i\u00e7indekiler render olur daha sonra useEffect.<\/p>\n\n\n\n
useEffect(() => {\n  console.log(\"handle change\")\n},[])<\/pre><\/div>\n\n\n\n
Yukar\u0131da verdi\u011fimiz \u00f6rneklerde hep mount i\u015flemleri yapt\u0131k yani de\u011fi\u015fimi yakala ve \u00e7al\u0131\u015ft\u0131r. Peki \u00e7al\u0131\u015ft\u0131rma bittikten sonra tetiklemek istersek ne yapmal\u0131y\u0131z (unmount)?<\/p>\n\n\n\n
useEffect(() => {\n   console.log(\"handle change\", counter);\/\/new value\n   return () => {\n      console.log(\"un mount\", counter);\/\/prev value\n   };\n}, [counter]);<\/pre><\/div>\n\n\n\n
return () => <\/strong> counter de\u011feri g\u00fcncellemeden \u00f6nce handle eden k\u0131s\u0131m. Genellikle window.addEventListener ve timerlarda uygulanan bir davran\u0131\u015ft\u0131r.  <\/p>\n\n\n\n
useEffect(() => {\n   window.addEventListener(\"keyup\", keyUpHandle);\n   return () => {\n     window.removeEventListener(\"keyup\",keyUpHandle)\n   };\n}, [counter]);<\/pre><\/div>\n\n\n\n
Bu \u00f6rnekte counter her de\u011fi\u015fti\u011finde window’a keyup eventi i\u00e7in bir fonksiyon ekliyoruz. E\u011fer unmount <\/strong>ile remove yapmasayd\u0131k <\/strong>her useEffect i\u00e7ine giri\u015fte keyup i\u00e7in event ekleyecekti. \u00d6rne\u011fin 5 kez counter de\u011fi\u015ftiyse keyup i\u00e7in 5 tane handler olacakt\u0131. B\u00f6ylece bir keyup yapt\u0131\u011f\u0131m\u0131zda keyupHandler 5 kez tetiklenecektir.<\/p>\n\n\n\n
useCallback<\/h5>\n\n\n\n
Ana componenet her render oldu\u011funda i\u00e7indeki fonksiyonlar\u0131n bir instance yeniden olu\u015fturulur, useCallback gereksiz yere olu\u015fturulmas\u0131n\u0131 engeller ve fonskiyonu memoize eder. useEffect gibi bir ba\u011f\u0131ml\u0131 dizisine sahiptir, objeler belirlenip sadece bu objeler de\u011fi\u015fti\u011finden yeniden olu\u015fturulacak \u015fekilde \u00e7al\u0131\u015f\u0131r.<\/p>\n\n\n\n
const handleSearch = (value) => {\n  setSearchValue(value);\n  setList(search(value));\n};\nconst search = useCallback((term) => {\n    console.log(\"count\",counter)\n  return term\n    ? list.filter((p) => p.toLowerCase().includes(term.toLowerCase()))\n    : list;\n},[]);<\/pre><\/div>\n\n\n\n
Yukar\u0131daki \u00f6rnekte uygulama ilk render oldu\u011funda fonksiyonu memoize eder, yani list ve counter de\u011ferleri de\u011fi\u015fse bile eski de\u011ferleri ile arama yapar. E\u011fer memoize etmeseydik her seferinde function yeniden olu\u015fturacakt\u0131. Ama bu yukar\u0131daki \u00f6rnekte listeye bir de\u011fer eklense bile fonksiyonda h\u00e2l\u00e2 eski liste g\u00f6re arama yapacakt\u0131r bunu d\u00fczeltmek i\u00e7in ba\u011f\u0131ml\u0131l\u0131k dizesine listi eklemeliyiz.<\/p>\n\n\n\n
const search = useCallback((term) => {\n  return term\n    ? list.filter((p) => p.toLowerCase().includes(term.toLowerCase()))\n    : list;\n},[list]);<\/pre><\/div>\n\n\n\n
E\u011fer ki b\u00fcy\u00fck bir list var ise yukar\u0131daki bir mant\u0131kta fonksiyonu memoize etmek gayet mant\u0131kl\u0131, e\u011fer maliyeti y\u00fcksek olmayan bir fonksiyonunuz var ise gereksiz y\u00fck olur. memoize etmemenin de kendine g\u00f6re bir maliyeti var ve bazen organizasyonu zor olabiliyor.<\/p>\n\n\n\n
useMemo <\/h5>\n\n\n\n
useMemo’nun \u00e7ok detayl\u0131 a\u00e7\u0131klanm\u0131\u015f bir \u00f6rnek yaz\u0131s\u0131n\u0131 bakabilirsiniz.  What are React Memo and useMemo? What situations is it used?<\/a><\/p>\n\n\n\n
useMemo hooksu useCallback fonksiyonu gibi bir memoize i\u015flemi yapar ama sadece fonksiyonu memoize etmez, bir girdiye g\u00f6re \u00e7\u0131kan sonucu hesaplar ve onu memoize eder.<\/p>\n\n\n\n
\u00d6rne\u011fin fakt\u00f6riyel hesaplayan bir metodumuz var. Girdimiz 5 ise 120 \u00e7\u0131k\u0131\u015f olur ve bunu haf\u0131zaya atar. Siz tekrar 5’in fakt\u00f6riyelini hesaplad\u0131\u011f\u0131n\u0131z zaman yeniden hesaplamaz ve direkt 120’yi d\u00f6ner. Bu \u00f6rnekler \u00e7o\u011falt\u0131labilir \u00f6rne\u011fin +4k sabit bir liste \u00fczerinde s\u0131ralama yap\u0131yorsunuz. Bu s\u0131ralama’da iki t\u00fcr olabilir artan ya da azalan. Listi cache’e atar ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fmedik\u00e7e yeniden hesaplama yapmaz.<\/p>\n\n\n\n
\/\/UNNECESSARY USE\nuseEffect(() => {\n  setDefList(sortedList);\n},[isIncrement])\nconst sortedList = useMemo(() => {\n  if(isIncrement){\n    return defList.sort((a,b) => {return a > b ? 0 : -1});\n  }\n  return defList.sort((a,b) => {return a > b ? -1 : 0});\n},[defList,isIncrement])<\/pre><\/div>\n\n\n\n
Yukar\u0131daki \u00f6rnek gereksiz bir kullan\u0131md\u0131r. Zaten isIncrement de\u011feri ayn\u0131 kald\u0131k\u00e7a useEffect tetiklenmeyecektir.<\/p>\n\n\n\n
 const sortedList = useMemo(() => {\n    if(isIncrement){\n      return defList.sort((a,b) => {return a > b ? 0 : -1});\n    }\n    return defList.sort((a,b) => {return a > b ? -1 : 0});\n  },[defList,isIncrement])\n....\n....\n....\nreturn(\n<div>\n  <button onclick="{()" > handleSort(true)}>Sort +<\/button>\n  <button onclick="{()" > handleSort(false)}>Sort -<\/button>\n    <ul>\n       {sortedList.map((item, index) => {\n          return <li key="{item}">{p}<\/li>;\n       })}\n    <\/ul>\n<\/div>\n)<\/pre><\/div>\n\n\n\n
Bu yaz\u0131lan \u00f6rnek daha kullan\u0131\u015fl\u0131 sort + ‘ya art arta t\u0131klamada gereksiz bir render olmaz. Sadece isIncrement verisi de\u011fi\u015ftik\u00e7e fonksyion yeniden sorting yapar.<\/p>\n\n\n\n
Ne zaman kullanmal\u0131y\u0131z? (useMemo ve useCallback)<\/h5>\n\n\n\n
\u00d6ncelikle uygulaman\u0131z\u0131 tasarlarken bu performans hookslar\u0131 kullan\u0131lmamal\u0131. Bu hookslar ger\u00e7ekten ihtiya\u00e7 olan yerde kullan\u0131lmal\u0131s\u0131n\u0131z. Performans geli\u015ftirme ayn\u0131 zamanda baz\u0131 sorumluluklar\u0131 da pe\u015finde getirir, bu geli\u015ftirmeler bedavaya yap\u0131lmaz<\/mark>. Diyelim her fonksiyonunuzu useCallback ile memoize ettik bu durumda b\u0131rak\u0131n performans geli\u015ftirmeyi daha da performans\u0131 d\u00fc\u015f\u00fcrm\u00fc\u015f oluruz. Component i\u00e7inde inline fonksiyonlar\u0131n yeniden olu\u015fmas\u0131 maliyetli bir i\u015flem de\u011fildir<\/strong>, yeniden fonksiyonu olu\u015fturdu\u011funda garbage collector eskisini \u00e7\u00f6pe atar ama useCallback ile memoize edilirse \u00e7al\u0131\u015fmaz ve memory birikir.
Peki hangi durumlarda kullanmal\u0131y\u0131z?<\/p>\n\n\n\n
  • Referans kar\u015f\u0131la\u015ft\u0131rmalar\u0131<\/li>
  • Maliyetli i\u015flemler<\/li><\/ul>\n\n\n\n
    var obj1 = {name:\"Okan\",surname : \"Karadag\"}\nvar obj2 = {name:\"Okan\",surname : \"Karadag\"}\nconsole.log(obj1 === obj2); \/\/ false\nvar t1 = 5;\nvar t2 = 5;\nconsole.log(t1 === t2);\/\/true<\/pre><\/div>\n\n\n\n
    Yukar\u0131daki \u00f6rne\u011fe bakt\u0131\u011f\u0131m\u0131zda obj1 ve obj2 e\u015fit olmas\u0131na ra\u011fmen false d\u00f6ner. (derinlere girmiyorum \u015fimdilik)
    Bu noktada dependecy list bu a\u00e7\u0131\u011f\u0131 kapat\u0131yor ve yapmas\u0131 gereken i\u015fi yap\u0131yor. Veriler de\u011fi\u015fti\u011finde e\u011fer biz manuel olarak kontrol etseydik referans tipler i\u00e7in sonu\u00e7 hep false \u00e7\u0131kaca\u011f\u0131ndan her seferinde render olacakt\u0131r i\u015fte bu kar\u015f\u0131la\u015ft\u0131rma i\u015fini react’a b\u0131rak\u0131yoruz. \u015eimdi gereksiz render’\u0131n do\u011fru bir \u015fekilde \u00f6n\u00fcne nas\u0131l ge\u00e7ilir bakal\u0131m.<\/p>\n\n\n\n
    export const Options = ({ list, getItem }) => {\n  useEffect(() => {\n    const props = { list, getItem };\n  }, [list, getItem]);\n  return <div>foobar<\/div>;\n};\n\nexport const Select = () => {\n  const list = useMemo(() => {return ["Ronaldo", "Messi", "Mertens"]},[]);\n  const getItem = useCallback((name) => {\n    list.filter((item) => item.startsWith(name));\n  },[]);\n  return <options getitem="{getItem}" list="{list}" \/>;\n};\n....\nApp:\nreturn (\n    <div classname="App">\n        <select \/>\n        <p>Counter: {counter}<\/p>\n        <button onclick="{()" > handleChange()}>Increment<\/button>\n     <\/div>\n)<\/pre><\/div>\n\n\n\n
    Yukar\u0131daki \u00f6rnekte e\u011fer fonksiyon ve diziyi memoize etmeseydik counter her de\u011fi\u015fti\u011finde ya da ana component render oldu\u011funda yeni bir list ve getItem fonksiyonlar\u0131n\u0131 olu\u015fturacakt\u0131r. Yukar\u0131dakine benzer durumlarda kullanman\u0131zda bir sak\u0131nca yok. Ama kullan\u0131rken ger\u00e7ekten ihtiyac\u0131n\u0131z olup olmad\u0131\u011f\u0131n\u0131 iyice analiz ediniz.<\/p>\n\n\n\n
    G\u00f6nderinin sonuna geldik ba\u015fka bir makalede g\u00f6r\u00fc\u015fmek \u00fczere \ud83d\ude42<\/p>","protected":false},"excerpt":{"rendered":"
    useCallback, useEffect and useMemo are that are sometimes confused hooks with each other.<\/p>","protected":false},"author":1,"featured_media":744,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[75],"tags":[99,102,85,77,100,101],"yoast_head":"\nuseCallback, useMemo, useEffect nedir? Nas\u0131l ve Ne Zaman Kullan\u0131l\u0131r? Farklar\u0131 Nelerdir? - Okan Karada\u011f<\/title>\n<meta name=\"description\" content=\"useCallback, useEffect ve useMemo hooklar\u0131 zaman zaman birbiriyle kar\u0131\u015fan hookslard\u0131r. Bu \u00fc\u00e7 hooksun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve ne zaman kullan\u0131laca\u011f\u0131n\u0131 inceleyece\u011fiz\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/okankaradag.com\/en\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"useCallback, useMemo, useEffect nedir? Nas\u0131l ve Ne Zaman Kullan\u0131l\u0131r? Farklar\u0131 Nelerdir? - Okan Karada\u011f\" \/>\n<meta property=\"og:description\" content=\"useCallback, useEffect ve useMemo hooklar\u0131 zaman zaman birbiriyle kar\u0131\u015fan hookslard\u0131r. Bu \u00fc\u00e7 hooksun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve ne zaman kullan\u0131laca\u011f\u0131n\u0131 inceleyece\u011fiz\" \/>\n<meta property=\"og:url\" content=\"https:\/\/okankaradag.com\/en\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir\/\" \/>\n<meta property=\"og:site_name\" content=\"Okan Karada\u011f\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-08T00:14:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-08T00:14:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/08\/dollar-fire.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"684\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Okan Karada\u011f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Okan Karada\u011f\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir#article\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir\"},\"author\":{\"name\":\"Okan Karada\u011f\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"headline\":\"useCallback, useMemo, useEffect nedir? Nas\u0131l ve Ne Zaman Kullan\u0131l\u0131r? Farklar\u0131 Nelerdir?\",\"datePublished\":\"2022-08-08T00:14:30+00:00\",\"dateModified\":\"2022-08-08T00:14:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir\"},\"wordCount\":863,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"keywords\":[\"hooks\",\"Memoize\",\"react-hooks\",\"reactjs\",\"useCallback\",\"useMemo\"],\"articleSection\":[\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir\",\"url\":\"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir\",\"name\":\"useCallback, useMemo, useEffect nedir? Nas\u0131l ve Ne Zaman Kullan\u0131l\u0131r? Farklar\u0131 Nelerdir? - Okan Karada\u011f\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/#website\"},\"datePublished\":\"2022-08-08T00:14:30+00:00\",\"dateModified\":\"2022-08-08T00:14:31+00:00\",\"description\":\"useCallback, useEffect ve useMemo hooklar\u0131 zaman zaman birbiriyle kar\u0131\u015fan hookslard\u0131r. Bu \u00fc\u00e7 hooksun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve ne zaman kullan\u0131laca\u011f\u0131n\u0131 inceleyece\u011fiz\",\"breadcrumb\":{\"@id\":\"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/okankaradag.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"useCallback, useMemo, useEffect nedir? Nas\u0131l ve Ne Zaman Kullan\u0131l\u0131r? Farklar\u0131 Nelerdir?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/okankaradag.com\/#website\",\"url\":\"https:\/\/okankaradag.com\/\",\"name\":\"Okan Karada\u011f\",\"description\":\"Programlama \u00dczerine\",\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/okankaradag.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\",\"name\":\"Okan Karada\u011f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g\",\"caption\":\"Okan Karada\u011f\"},\"logo\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/okankaradag.com\"],\"url\":\"https:\/\/okankaradag.com\/en\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"useCallback, useMemo, useEffect nedir? Nas\u0131l ve Ne Zaman Kullan\u0131l\u0131r? Farklar\u0131 Nelerdir? - Okan Karada\u011f","description":"useCallback, useEffect ve useMemo hooklar\u0131 zaman zaman birbiriyle kar\u0131\u015fan hookslard\u0131r. Bu \u00fc\u00e7 hooksun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve ne zaman kullan\u0131laca\u011f\u0131n\u0131 inceleyece\u011fiz","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/okankaradag.com\/en\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir\/","og_locale":"en_US","og_type":"article","og_title":"useCallback, useMemo, useEffect nedir? Nas\u0131l ve Ne Zaman Kullan\u0131l\u0131r? Farklar\u0131 Nelerdir? - Okan Karada\u011f","og_description":"useCallback, useEffect ve useMemo hooklar\u0131 zaman zaman birbiriyle kar\u0131\u015fan hookslard\u0131r. Bu \u00fc\u00e7 hooksun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve ne zaman kullan\u0131laca\u011f\u0131n\u0131 inceleyece\u011fiz","og_url":"https:\/\/okankaradag.com\/en\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir\/","og_site_name":"Okan Karada\u011f","article_published_time":"2022-08-08T00:14:30+00:00","article_modified_time":"2022-08-08T00:14:31+00:00","og_image":[{"width":1024,"height":684,"url":"https:\/\/okankaradag.com\/wp-content\/uploads\/2022\/08\/dollar-fire.jpg","type":"image\/jpeg"}],"author":"Okan Karada\u011f","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Okan Karada\u011f","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir#article","isPartOf":{"@id":"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir"},"author":{"name":"Okan Karada\u011f","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"headline":"useCallback, useMemo, useEffect nedir? Nas\u0131l ve Ne Zaman Kullan\u0131l\u0131r? Farklar\u0131 Nelerdir?","datePublished":"2022-08-08T00:14:30+00:00","dateModified":"2022-08-08T00:14:31+00:00","mainEntityOfPage":{"@id":"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir"},"wordCount":863,"commentCount":1,"publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"keywords":["hooks","Memoize","react-hooks","reactjs","useCallback","useMemo"],"articleSection":["React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir#respond"]}]},{"@type":"WebPage","@id":"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir","url":"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir","name":"useCallback, useMemo, useEffect nedir? Nas\u0131l ve Ne Zaman Kullan\u0131l\u0131r? Farklar\u0131 Nelerdir? - Okan Karada\u011f","isPartOf":{"@id":"https:\/\/okankaradag.com\/#website"},"datePublished":"2022-08-08T00:14:30+00:00","dateModified":"2022-08-08T00:14:31+00:00","description":"useCallback, useEffect ve useMemo hooklar\u0131 zaman zaman birbiriyle kar\u0131\u015fan hookslard\u0131r. Bu \u00fc\u00e7 hooksun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve ne zaman kullan\u0131laca\u011f\u0131n\u0131 inceleyece\u011fiz","breadcrumb":{"@id":"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/okankaradag.com\/react\/usecallback-usememo-useeffect-nedir-nasil-ve-ne-zaman-kullanilir-farklari-nelerdir#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/okankaradag.com\/"},{"@type":"ListItem","position":2,"name":"useCallback, useMemo, useEffect nedir? Nas\u0131l ve Ne Zaman Kullan\u0131l\u0131r? Farklar\u0131 Nelerdir?"}]},{"@type":"WebSite","@id":"https:\/\/okankaradag.com\/#website","url":"https:\/\/okankaradag.com\/","name":"Okan Karada\u011f","description":"Programlama \u00dczerine","publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/okankaradag.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52","name":"Okan Karada\u011f","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g","caption":"Okan Karada\u011f"},"logo":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/okankaradag.com"],"url":"https:\/\/okankaradag.com\/en\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/734"}],"collection":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/comments?post=734"}],"version-history":[{"count":9,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/734\/revisions"}],"predecessor-version":[{"id":745,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/734\/revisions\/745"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media\/744"}],"wp:attachment":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media?parent=734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/categories?post=734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/tags?post=734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}