{"id":565,"date":"2021-12-27T20:54:13","date_gmt":"2021-12-27T20:54:13","guid":{"rendered":"https:\/\/okankaradag.com\/?p=565"},"modified":"2021-12-27T20:55:25","modified_gmt":"2021-12-27T20:55:25","slug":"react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir","status":"publish","type":"post","link":"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir","title":{"rendered":"What are React Memo and useMemo? What situations is it used?"},"content":{"rendered":"<p>Bug\u00fcn react hookslar\u0131ndan <strong>useMemo <\/strong>ve <strong>React.memo<\/strong>&#8216;yu inceleyece\u011fiz, \u00f6rnekler yapaca\u011f\u0131z, nerede kullan\u0131lmas\u0131 gerekti\u011fini bak\u0131p hangi ihtiya\u00e7lar i\u00e7in kullan\u0131labilece\u011fini tespit edece\u011fiz.<\/p>\n\n\n\n<p>\u00d6ncelikle memoize kavram\u0131n\u0131n anlam\u0131na bakal\u0131m.<\/p>\n\n\n\n<p><strong>Memoization<\/strong>, bir fonksiyon hesaplama yaparken daha \u00f6nce yapt\u0131\u011f\u0131 i\u015flemi tutmas\u0131 ve b\u00f6ylece de her seferinde fonksiyonu \u00e7al\u0131\u015ft\u0131rmayan bir y\u00f6ntemdir. \u00d6rne\u011fin fakt\u00f6riyel hesaplayan bir fonksiyonumuz var, 12&#8217;nin her seferinde fakt\u00f6riyelini al\u0131nmas\u0131 yerine bir kez al\u0131p <strong>memoize <\/strong>edilirse tekrar \u00e7a\u011fr\u0131lma durumunda da fonksiyon \u00e7al\u0131\u015fmaz ve otomatik bellekten \u00e7ekilir.<\/p>\n\n\n\n<p>Tan\u0131m\u0131 yapt\u0131ktan sonra Reactta bu y\u00f6ntem nas\u0131l kullan\u0131l\u0131yor onu inceleyelim.<\/p>\n\n\n\n<h3><strong>React.Memo<\/strong><\/h3>\n\n\n\n<p>\u00d6rne\u011fin bir header component ve alt\u0131nda da bir say\u0131 art\u0131ran bir butonunuz olsun, butona her t\u0131klad\u0131\u011f\u0131m\u0131zda header tekrar render olacakt\u0131r. A\u015fa\u011f\u0131daki kodu inceleyelim<\/p>\n\n\n\n<p><strong>App.js<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">import { useState } from &quot;react&quot;;\nimport Header from &quot;.\/Header&quot;;\nimport &quot;.\/styles.css&quot;;\n\nexport default function App() {\n  const [number, setNumber] = useState(0);\n  return (\n    &lt;div classname=&quot;App&quot;&gt;\n      &lt;header title=&quot;Title&quot; \/&gt;\n      &lt;button onclick=&quot;{()&quot; &gt; setNumber(number + 1)}&gt;Increase&lt;\/button&gt;\n      &lt;p&gt;{number}&lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}<\/pre><\/div>\n\n\n\n<p><strong>Header.js<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:default decode:true\">const Header = ({ title }) =&gt; {\n  console.log(&quot;Header render&quot;);\n  return &lt;h2&gt;{title}&lt;\/h2&gt;;\n};\nexport default Header;\n<\/pre><\/div>\n\n\n\n<p>her butona t\u0131klad\u0131\u011f\u0131m\u0131zda header render olacakt\u0131r<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"783\" height=\"306\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/12\/react-counter22.gif\" alt=\"\" class=\"wp-image-569\"\/><\/figure>\n\n\n\n<p>\u0130\u015fte bunun \u00f6n\u00fcne ge\u00e7ebilmek i\u00e7in header componentini memoize etmemiz laz\u0131m, a\u015fa\u011f\u0131daki gibi memoize edersek tekrar render olmayacakt\u0131r.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">import { memo } from &quot;react&quot;;\nconst Header = ({ title }) =&gt; {\n  console.log(&quot;Header render&quot;);\n  return &lt;h2&gt;{title}&lt;\/h2&gt;;\n};\nexport default memo(Header);<\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"783\" height=\"306\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/12\/react-counter-memo.gif\" alt=\"\" class=\"wp-image-567\"\/><\/figure>\n\n\n\n<p>Kaynak kod: <a rel=\"noreferrer noopener\" href=\"https:\/\/codesandbox.io\/s\/elegant-stonebraker-n405e?file=\/src\/App.js:0-341\" data-type=\"URL\" data-id=\"https:\/\/codesandbox.io\/s\/elegant-stonebraker-n405e?file=\/src\/App.js:0-341\" target=\"_blank\">sandbox<\/a><\/p>\n\n\n\n<p><strong>Ne Zaman Kullanmal\u0131y\u0131z?<\/strong><br>\u00dcstteki \u00f6rnek nas\u0131l kullanmam\u0131za dair bir \u00f6rnekti, bu tarz bir yakla\u015f\u0131mda ihtiyac\u0131m\u0131z yok tam tersi gereksiz bir performans kayb\u0131 olur propslar\u0131n yo\u011fun oldu\u011fu, fazla render olunan yerlerde kullan\u0131lmas\u0131 daha amac\u0131na uygun olur<\/p>\n\n\n\n<h3>useMemo Nedir?<\/h3>\n\n\n\n<p>useMemo hooksu dependecy liste ba\u011fl\u0131 olarak \u00e7al\u0131\u015f\u0131r, listeden bir de\u011fer de\u011fi\u015fti\u011finde fonksiyon \u00e7al\u0131\u015f\u0131r ve cache&#8217;a at\u0131l\u0131r\/memoize edilir. <\/p>\n\n\n\n<p><strong>Hangi Durumlarda Kullan\u0131lmal\u0131?<\/strong><\/p>\n\n\n\n<p>usememo hooksu expensive fonksiyonlar\u0131m\u0131z\u0131 gereksiz yere render olmas\u0131n\u0131 engeller, <strong>tamamen performans optimize etmek i\u00e7in kullan\u0131lan bir hook<\/strong>. basit, fazla i\u015flem olmayan fonksiyonlarda kullan\u0131lmamal\u0131 ve amac\u0131n\u0131z tekrar render olmas\u0131n olmamal\u0131 react bunun garantisini vermiyor sadece performans \u00fczerine kurgulanmal\u0131.<\/p>\n\n\n\n<p><strong>Nas\u0131l \u00c7al\u0131\u015f\u0131r<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">const memoizedValue = useMemo(() =&gt; computeExpensiveValue(a, b), [a, b]);<\/pre><\/div>\n\n\n\n<p><strong>\u00d6rnek Proje<\/strong><br>Statik bir kullan\u0131c\u0131 listemiz olacak ve dropdown ile se\u00e7ilen kullanc\u0131n\u0131n ya\u015f\u0131n\u0131 hesaplayaca\u011f\u0131z ayr\u0131ca bir de buton sayac\u0131m\u0131z olacak <br><br><strong>App.js:<\/strong><\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">const users = [\n  { Id: 1, Name: \"Okan\", BirthDate: \"09.10.1997\" },\n  { Id: 2, Name: \"Test\", BirthDate: \"01.05.1994\" },\n  { Id: 3, Name: \"Can\", BirthDate: \"03.12.1996\" }\n];<\/pre><\/div>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js mark:15 decode:true\">export default function App() {\n  const [userId, setUserId] = useState(null);\n  const [count, setCount] = useState(0);\n\n  const computeAge = (userId) =&gt; {\n    if (userId == null) return;\n    console.log(\"rendering function\");\n    var localizedDate = users.find((p) =&gt; p.Id == userId).BirthDate;\n    var dateArray = localizedDate.split(\".\");\n    var date = new Date(dateArray[2], dateArray[1], dateArray[0]);\n    var diff = new Date(new Date().getTime() - date.getTime());\n    return Math.abs(diff.getUTCFullYear() - 1970);\n  };\n\n  const ageAsMemoValue = computeAge(userId);\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Counter&lt;\/button&gt;\n      &lt;p&gt;{count}&lt;\/p&gt;\n      &lt;hr \/&gt;\n      &lt;select value={userId} onChange={(e) =&gt; setUserId(e.target.value)}&gt;\n        &lt;option&gt;Select...&lt;\/option&gt;\n        {users.map((item) =&gt; {\n          return (\n            &lt;option key={item.Id} value={item.Id}&gt;\n              {item.Name}\n            &lt;\/option&gt;\n          );\n        })}\n      &lt;\/select&gt;\n      {userId ? (\n        &lt;div&gt;\n          &lt;p&gt;year: {ageAsMemoValue}&lt;\/p&gt;\n          &lt;p&gt;name: {users.find((p) =&gt; p.Id == userId).Name}&lt;\/p&gt;\n        &lt;\/div&gt;\n      ) : null}\n    &lt;\/div&gt;\n  );\n}<\/pre><\/div>\n\n\n\n<p>Dropdowndan bir kullan\u0131c\u0131 se\u00e7ti\u011fimiz zaman app.js render olacak ve kullanc\u0131n\u0131n ya\u015f\u0131 hesaplanacak, fakat saya\u00e7 butonumuzu t\u0131klad\u0131\u011f\u0131m\u0131zda da yeniden render sonucu se\u00e7ili kullan\u0131c\u0131n\u0131n ya\u015f\u0131 yeniden hesaplanacak ve a\u015fa\u011f\u0131daki gibi bir sonu\u00e7 elde edece\u011fiz<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/12\/react-memoize.gif\" alt=\"\" class=\"wp-image-574\" width=\"611\" height=\"374\"\/><\/figure>\n\n\n\n<p>\u015eimdi fonksiyon de\u011ferimizi memoize edelim.<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true\">const ageAsMemoValue = useMemo(() =&gt; computeAge(userId), [userId]);<\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/12\/react-memoizeV2.gif\" alt=\"\" class=\"wp-image-575\" width=\"611\" height=\"374\"\/><\/figure>\n\n\n\n<p><strong>Sonu\u00e7<\/strong><br>G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi useMemo ile tekrar render sonucu gereksiz hesaplamalardan ka\u00e7\u0131nm\u0131\u015f olduk, ama re-renderingi \u00f6nlemek her zaman iyi bir \u015fey de\u011fil, performans\u0131 geli\u015ftirirken bunu bedavaya yapm\u0131yor kendisinin de bir maliyeti var, mesela memoize olan fonksiyon ilk \u00e7al\u0131\u015ft\u0131\u011f\u0131nda bunu bellekde depolar, bu i\u015flem b\u00fcy\u00fckse mesela 5000 kay\u0131t d\u00f6nen bir fonksiyonsa ilk render maliyetli olacakt\u0131r, o y\u00fczden projenizi ilk kez yaparken kullanmay\u0131n daha sonra maliyetli fonksiyonlar\u0131n\u0131z\u0131 optimize edebilirsiniz. <\/p>\n\n\n\n<p>Kod: <a href=\"https:\/\/codesandbox.io\/s\/react-usememo-ngxxg?file=\/src\/App.js\" data-type=\"URL\" data-id=\"https:\/\/codesandbox.io\/s\/react-usememo-ngxxg?file=\/src\/App.js\">Sandbox<\/a><br><br>Ba\u015fka bir yaz\u0131da g\u00f6r\u00fc\u015fmek \u00fczere \ud83d\ude42<\/p>\n\n\n\n<h3><\/h3>","protected":false},"excerpt":{"rendered":"<p>In this article, we will examine useMemo and React.memo. Besides these We're going to look at like Where and in what situations should it be used?<\/p>","protected":false},"author":1,"featured_media":579,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,75],"tags":[82,85,77],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Memo ve useMemo nedir? Hangi durumlarda kullan\u0131l\u0131r? - Okan Karada\u011f<\/title>\n<meta name=\"description\" content=\"useMemo ve React memo&#039;yu inceleyece\u011fiz, \u00f6rnekler yapaca\u011f\u0131z, nerede kullan\u0131lmas\u0131 gerekti\u011fini bak\u0131p hangi ihtiya\u00e7lar i\u00e7in kullan\u0131labilece\u011fini tespit edece\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\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Memo ve useMemo nedir? Hangi durumlarda kullan\u0131l\u0131r? - Okan Karada\u011f\" \/>\n<meta property=\"og:description\" content=\"useMemo ve React memo&#039;yu inceleyece\u011fiz, \u00f6rnekler yapaca\u011f\u0131z, nerede kullan\u0131lmas\u0131 gerekti\u011fini bak\u0131p hangi ihtiya\u00e7lar i\u00e7in kullan\u0131labilece\u011fini tespit edece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir\" \/>\n<meta property=\"og:site_name\" content=\"Okan Karada\u011f\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-27T20:54:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-27T20:55:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/12\/react-banner.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"733\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir#article\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir\"},\"author\":{\"name\":\"Okan Karada\u011f\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"headline\":\"React Memo ve useMemo nedir? Hangi durumlarda kullan\u0131l\u0131r?\",\"datePublished\":\"2021-12-27T20:54:13+00:00\",\"dateModified\":\"2021-12-27T20:55:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir\"},\"wordCount\":511,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"keywords\":[\"javascript\",\"react-hooks\",\"reactjs\"],\"articleSection\":[\"JavaScript\",\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir\",\"url\":\"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir\",\"name\":\"React Memo ve useMemo nedir? Hangi durumlarda kullan\u0131l\u0131r? - Okan Karada\u011f\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/#website\"},\"datePublished\":\"2021-12-27T20:54:13+00:00\",\"dateModified\":\"2021-12-27T20:55:25+00:00\",\"description\":\"useMemo ve React memo'yu inceleyece\u011fiz, \u00f6rnekler yapaca\u011f\u0131z, nerede kullan\u0131lmas\u0131 gerekti\u011fini bak\u0131p hangi ihtiya\u00e7lar i\u00e7in kullan\u0131labilece\u011fini tespit edece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/okankaradag.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Memo ve useMemo nedir? Hangi durumlarda kullan\u0131l\u0131r?\"}]},{\"@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":"React Memo ve useMemo nedir? Hangi durumlarda kullan\u0131l\u0131r? - Okan Karada\u011f","description":"useMemo ve React memo'yu inceleyece\u011fiz, \u00f6rnekler yapaca\u011f\u0131z, nerede kullan\u0131lmas\u0131 gerekti\u011fini bak\u0131p hangi ihtiya\u00e7lar i\u00e7in kullan\u0131labilece\u011fini tespit edece\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\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir","og_locale":"en_US","og_type":"article","og_title":"React Memo ve useMemo nedir? Hangi durumlarda kullan\u0131l\u0131r? - Okan Karada\u011f","og_description":"useMemo ve React memo'yu inceleyece\u011fiz, \u00f6rnekler yapaca\u011f\u0131z, nerede kullan\u0131lmas\u0131 gerekti\u011fini bak\u0131p hangi ihtiya\u00e7lar i\u00e7in kullan\u0131labilece\u011fini tespit edece\u011fiz.","og_url":"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir","og_site_name":"Okan Karada\u011f","article_published_time":"2021-12-27T20:54:13+00:00","article_modified_time":"2021-12-27T20:55:25+00:00","og_image":[{"width":1100,"height":733,"url":"https:\/\/okankaradag.com\/wp-content\/uploads\/2021\/12\/react-banner.jpg","type":"image\/jpeg"}],"author":"Okan Karada\u011f","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Okan Karada\u011f","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir#article","isPartOf":{"@id":"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir"},"author":{"name":"Okan Karada\u011f","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"headline":"React Memo ve useMemo nedir? Hangi durumlarda kullan\u0131l\u0131r?","datePublished":"2021-12-27T20:54:13+00:00","dateModified":"2021-12-27T20:55:25+00:00","mainEntityOfPage":{"@id":"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir"},"wordCount":511,"commentCount":0,"publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"keywords":["javascript","react-hooks","reactjs"],"articleSection":["JavaScript","React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir#respond"]}]},{"@type":"WebPage","@id":"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir","url":"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir","name":"React Memo ve useMemo nedir? Hangi durumlarda kullan\u0131l\u0131r? - Okan Karada\u011f","isPartOf":{"@id":"https:\/\/okankaradag.com\/#website"},"datePublished":"2021-12-27T20:54:13+00:00","dateModified":"2021-12-27T20:55:25+00:00","description":"useMemo ve React memo'yu inceleyece\u011fiz, \u00f6rnekler yapaca\u011f\u0131z, nerede kullan\u0131lmas\u0131 gerekti\u011fini bak\u0131p hangi ihtiya\u00e7lar i\u00e7in kullan\u0131labilece\u011fini tespit edece\u011fiz.","breadcrumb":{"@id":"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/okankaradag.com\/en\/react\/react-memo-ve-usememo-nedir-hangi-durumlarda-kullanilir#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/okankaradag.com\/"},{"@type":"ListItem","position":2,"name":"React Memo ve useMemo nedir? Hangi durumlarda kullan\u0131l\u0131r?"}]},{"@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\/565"}],"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=565"}],"version-history":[{"count":7,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/565\/revisions"}],"predecessor-version":[{"id":581,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/565\/revisions\/581"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media\/579"}],"wp:attachment":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media?parent=565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/categories?post=565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/tags?post=565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}