{"id":6345,"date":"2020-10-30T18:21:50","date_gmt":"2020-10-30T12:51:50","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6345"},"modified":"2020-10-30T18:21:50","modified_gmt":"2020-10-30T12:51:50","slug":"performance-optimization-with-usememo-and-usereducer","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/","title":{"rendered":"Performance optimization with useMemo and useReducer"},"content":{"rendered":"

React Hooks introduced some memory optimization hooks to improve performance.<\/span><\/p>\n

Data Hooks are hooks which store data. You store data that the specified portion of the UI specifically relies on for visual changes and memoize\/cache data that a given portion UI don\u2019t directly rely on for visual changes.\u00a0<\/span><\/p>\n

Storing is different from memoizing\/caching.<\/span><\/p>\n

There\u2019s a blurry line though. <\/span>useRef<\/span> is a hook that can play both roles depending on how it\u2019s used.<\/span><\/p>\n

useState<\/b> and <\/b>useRef<\/b> are data hooks. <\/b>useRef<\/b>, <\/b>useCallback<\/b> and <\/b>useMemo<\/b> are memoize hooks.<\/b><\/p>\n

Let\u2019s understand with an example.<\/span><\/p>\n

import React, {useState} from 'react';\r\n\r\nexport default function Example() {\r\n\r\n\u00a0\u00a0const [count1, setCount1] = useState(0);\r\n\r\n\u00a0\u00a0const [count2, setCount2] = useState(0);\r\n\r\n\u00a0\u00a0const increaseCounter1 = () => {\r\n\r\n\u00a0\u00a0\u00a0\u00a0setCount((count1) => count1 + 1);\r\n\r\n\u00a0\u00a0};\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0<div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button onClick={increaseCounter1}>Increase counter<\/button>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Counter value={count1}>Counter1<\/Counter>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Counter value={count2}>Counter2<\/Counter>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\r\n\u00a0\u00a0);\r\n\r\n}\r\n\r\nconst Counter = (value, children) => {\r\n\r\n\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0<div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{children}:{value}\r\n\r\n\u00a0\u00a0\u00a0\u00a0<\/div>)};<\/pre>\n
In the above example, the counter component is rendered twice when we click the Increase counter button. We even didn\u2019t update the second counter.<\/span><\/p>\n
This can be overcome by using react memo. React overcomes this by comparing props passed to components wrapped in memo hook. It is similar to the react.pure component.<\/span><\/p>\n
There is one important concept we should be aware of before understanding the useMemo and useCallback hook. i.e <\/span>Referential equality.<\/b><\/p>\n
Referential equality:<\/b><\/p>\n
when you define an object inside your React function component, It will not be referentially equal to the last time the same object has been identified (even if it has all the same properties with all the same values).<\/b> If a variable is a primitive (i.e., <\/b>string<\/b>, <\/b>number<\/b>, <\/b>boolean<\/b>, <\/b>null<\/b>, <\/b>undefined<\/b>, or <\/b>symbol<\/b>), then the reference never changes.<\/b><\/p>\n
UseMemo Hook;<\/b><\/p>\n
The use memo hook returns the memoized value passed in the callback as the first argument and the second argument is the dependency array. The dependent array determines the value on which the cashing of the function is done. Whenever the value of the dependency array changes the callback function is recalculated and again cashed. We use UseMemo where there is a very big function definition in the component to optimize the performance we have to cash the function.<\/span><\/p>\n
Let’s take a look at the example.<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/span><\/p>\n
const next = wordIndex + 1 === words.length ? 0 : wordIndex + 1;\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setWordIndex(next);\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\u00a0\u00a0import React, { useState } from 'react'\u00a0\u00a0\u00a0\r\n\r\nfunction RandomWords() {\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0const [count, setCount] = useState(0)\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0const [wordIndex, setWordIndex] = useState(0)\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0const words = ['This', 'is', 'React', 'Application', 'for', 'Testing', 'By', 'Priyanka']\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0const word = words[wordIndex]\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0const computeLetterCount = (word) => {\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let i = 0;\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0while (i < 200000000) i++\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(i)\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return word.length;\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0};\u00a0\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0const letterCount = (word) => { computeLetterCount(word) };\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0return (\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div>\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div style={{ padding: '15px' }}>\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>Compute number of letters (slow)<\/h2>\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>\"{word}\" has {letterCount(word)} letters<\/p>\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onClick={() => {\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Next word\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/button>\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>Increment a counter (fast)<\/h2>\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Counter: {count}<\/p>\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button onClick={() => setCount(count + 1)}>Increment<\/button>\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0)\u00a0\u00a0\r\n\r\n}\u00a0\u00a0\u00a0\u00a0\r\n\r\nexport default RandomWords<\/pre>\n
Now in the above example, the <\/b>computeLetterCount<\/i><\/b> is computed on every render.<\/b> Hence<\/span> increasing the Computation and time to render. We pass the<\/span> computeLetterCount<\/i><\/b> function in the useMemo hook and improve the performance.<\/span><\/p>\n
const letterCount = useMemo(() => computeLetterCount(word), [word]);<\/pre>\n
Now the computeLetterCount function will not compute every time on render and will only compute when the word is changed. Hence improving the performance.<\/span><\/p>\n
UseCallback Hook;<\/b><\/p>\n
useCallback is very similar to the useMemo hook the only difference is that the UseMemo hook calls the function as soon as the dependency array variable changes.<\/span><\/p>\n
But useCallback hook returns the instance of the function passed instead of calling it.<\/span><\/p>\n
useCallback – Allows you to cache an instance of a function between renders.<\/b><\/p>\n
useMemo – Allows you to cache a value between renders.<\/b><\/p>\n
When to use them?<\/b><\/h3>\n
If you are thinking of adding useCallback and useMemo hooks everywhere in your component, please don\u2019t.<\/span><\/p>\n
Adding performance optimizations using useCallback and useMemo is expensive and these optimizations don\u2019t always bring enough benefits to offset their cost.<\/span><\/p>\n
Both of these hooks add some extra complexity to your code and they require a lot of things working under the hood.<\/span><\/p>\n
You should consider using useCallback and\/or useMemo hooks on the following situations:<\/span><\/p>\n
1) Processing large amounts of data<\/span><\/p>\n
2) Working with interactive graphs and charts<\/span><\/p>\n
3) Implementing animations<\/span><\/p>\n
4) Incorporating component lazy loading (useMemo specifically)<\/span><\/p>\n
\"\"<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
React Hooks introduced some memory optimization hooks to improve performance. Data Hooks are hooks which store data. You store data that the specified portion of the UI specifically relies on for visual changes and memoize\/cache data that a given portion UI don\u2019t directly rely on for visual changes.\u00a0 Storing is different from memoizing\/caching. There\u2019s a […]<\/p>\n","protected":false},"author":1,"featured_media":6353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[360,257],"tags":[14,550],"class_list":["post-6345","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-react","tag-innovationm","tag-performance-optimization-with-usememo-and-usereducer"],"yoast_head":"\nPerformance optimization with useMemo and useReducer - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Performance optimization with useMemo and useReducer - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"React Hooks introduced some memory optimization hooks to improve performance. Data Hooks are hooks which store data. You store data that the specified portion of the UI specifically relies on for visual changes and memoize\/cache data that a given portion UI don\u2019t directly rely on for visual changes.\u00a0 Storing is different from memoizing\/caching. There\u2019s a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-30T12:51:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Performance-optimization.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\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:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Performance optimization with useMemo and useReducer\",\"datePublished\":\"2020-10-30T12:51:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/\"},\"wordCount\":548,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Performance-optimization.png\",\"keywords\":[\"InnovationM\",\"Performance optimization with useMemo and useReducer\"],\"articleSection\":[\"JavaScript\",\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/\",\"name\":\"Performance optimization with useMemo and useReducer - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Performance-optimization.png\",\"datePublished\":\"2020-10-30T12:51:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Performance-optimization.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/Performance-optimization.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/performance-optimization-with-usememo-and-usereducer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Performance optimization with useMemo and useReducer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Performance optimization with useMemo and useReducer - InnovationM - Blog","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:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/","og_locale":"en_US","og_type":"article","og_title":"Performance optimization with useMemo and useReducer - InnovationM - Blog","og_description":"React Hooks introduced some memory optimization hooks to improve performance. Data Hooks are hooks which store data. You store data that the specified portion of the UI specifically relies on for visual changes and memoize\/cache data that a given portion UI don\u2019t directly rely on for visual changes.\u00a0 Storing is different from memoizing\/caching. There\u2019s a […]","og_url":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/","og_site_name":"InnovationM - Blog","article_published_time":"2020-10-30T12:51:50+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Performance-optimization.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Performance optimization with useMemo and useReducer","datePublished":"2020-10-30T12:51:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/"},"wordCount":548,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Performance-optimization.png","keywords":["InnovationM","Performance optimization with useMemo and useReducer"],"articleSection":["JavaScript","React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/","url":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/","name":"Performance optimization with useMemo and useReducer - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Performance-optimization.png","datePublished":"2020-10-30T12:51:50+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Performance-optimization.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/10\/Performance-optimization.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/performance-optimization-with-usememo-and-usereducer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Performance optimization with useMemo and useReducer"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6345"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6345\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6353"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}