-
Notifications
You must be signed in to change notification settings - Fork 0
/
7fc725a3.5b45f166.js
1 lines (1 loc) · 7.36 KB
/
7fc725a3.5b45f166.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{132:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return p}));var o=n(2),r=n(7),a=(n(0),n(174)),i={id:"hooks_memo",title:"React.memo or useMemo Memorization hook \ud83d\udcbe",sidebar_label:"useMemo"},c={id:"react/hooks/hooks_memo",isDocsHomePage:!1,title:"React.memo or useMemo Memorization hook \ud83d\udcbe",description:"Memoization is an optimization technique used to primarily speed up programs by storing the results of expensive function calls and returning the cached results when the same inputs occur again.",source:"@site/docs/react/hooks/hooks_memo.md",permalink:"/docs/react/hooks/hooks_memo",lastUpdatedBy:"Abhin Pai",lastUpdatedAt:1595870245,sidebar_label:"useMemo",sidebar:"docs",previous:{title:"useContext a context hook \ud83e\uddf5",permalink:"/docs/react/hooks/hooks_ctx"},next:{title:"useReducer a state Hook \u2702\ufe0f",permalink:"/docs/react/hooks/hooks_reducer"}},s=[{value:"What is the cost of <code>React.memo </code>or <code>useMemo</code>?",id:"what-is-the-cost-of-reactmemo-or-usememo",children:[]},{value:"When NOT use React <code>React.memo </code>or <code>useMemo</code>?",id:"when-not-use-react-reactmemo-or-usememo",children:[{value:"There are few consideration while implementing the <code>useMemo</code> hook",id:"there-are-few-consideration-while-implementing-the-usememo-hook",children:[]}]}],m={rightToc:s};function p(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(o.a)({},m,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Memoization is an optimization technique used to primarily speed up programs by storing the results of expensive function calls and returning the cached results when the same inputs occur again."),Object(a.b)("p",null,"This can be achieve in react using the ",Object(a.b)("inlineCode",{parentName:"p"},"React.memo")," or ",Object(a.b)("inlineCode",{parentName:"p"},"useMemo")," react hook."),Object(a.b)("h4",{id:"usememo-takes-the-react-functional-component-and-render-it-initially-and-on-subsequent-render-the-hook-internally-take-care-of--shouldcomponentupdate-method-which-check-the-current-states-or-props-and-decide-whether-to-render-the-component-or-not"},Object(a.b)("inlineCode",{parentName:"h4"},"useMemo")," takes the react functional component and render it initially and on subsequent render the hook internally take care of ",Object(a.b)("inlineCode",{parentName:"h4"},"shouldComponentUpdate")," method which check the current states or props and decide whether to render the component or not"),Object(a.b)("p",null,Object(a.b)("inlineCode",{parentName:"p"},"useMemo")," or ",Object(a.b)("inlineCode",{parentName:"p"},"React.memo")," is the one of the major advantage to optimize the application performance by reducing the redundant rendering "),Object(a.b)("h2",{id:"what-is-the-cost-of-reactmemo-or-usememo"},"What is the cost of ",Object(a.b)("inlineCode",{parentName:"h2"},"React.memo "),"or ",Object(a.b)("inlineCode",{parentName:"h2"},"useMemo"),"?"),Object(a.b)("p",null,"A memoized component compares old with news props to decide, if to re-render each render cycle.\nA plain component does not care and just renders, after props/state change in a parent."),Object(a.b)("h2",{id:"when-not-use-react-reactmemo-or-usememo"},"When NOT use React ",Object(a.b)("inlineCode",{parentName:"h2"},"React.memo "),"or ",Object(a.b)("inlineCode",{parentName:"h2"},"useMemo"),"?"),Object(a.b)("p",null,"There are no hard rules. Things, that affect ",Object(a.b)("inlineCode",{parentName:"p"},"React.memo "),"or ",Object(a.b)("inlineCode",{parentName:"p"},"useMemo")," negatively:"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},"component often re-renders with props, that have changed anyway"),Object(a.b)("li",{parentName:"ul"},"component is cheap to re-render"),Object(a.b)("li",{parentName:"ul"},"comparison function is expensive to perform")),Object(a.b)("h3",{id:"there-are-few-consideration-while-implementing-the-usememo-hook"},"There are few consideration while implementing the ",Object(a.b)("inlineCode",{parentName:"h3"},"useMemo")," hook"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},"If we pass a ",Object(a.b)("strong",{parentName:"li"},"function")," to a component as a props ",Object(a.b)("strong",{parentName:"li"},"useMemo")," will think its a new one and update the component always. Instead we can use ",Object(a.b)("inlineCode",{parentName:"li"},"useCallback")," for the function and pass the reference of the callback function instead"),Object(a.b)("li",{parentName:"ul"},"If we pass a ",Object(a.b)("strong",{parentName:"li"},"object")," as a props to a component then like function ",Object(a.b)("strong",{parentName:"li"},"useMemo")," will think it as new one and update the component always ")),Object(a.b)("p",null,"Here is the live example of ",Object(a.b)("inlineCode",{parentName:"p"},"React.memo")," and ",Object(a.b)("inlineCode",{parentName:"p"},"useMemo")," hooks please refer the ",Object(a.b)("a",Object(o.a)({parentName:"p"},{href:"https://codesandbox.io/s/react-memo-3mdfw?file=/src/App.js:0-661"}),"codesandbox")))}p.isMDXComponent=!0},174:function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return h}));var o=n(0),r=n.n(o);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var m=r.a.createContext({}),p=function(e){var t=r.a.useContext(m),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},l=function(e){var t=p(e.components);return r.a.createElement(m.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},d=r.a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,i=e.parentName,m=s(e,["components","mdxType","originalType","parentName"]),l=p(n),d=o,h=l["".concat(i,".").concat(d)]||l[d]||u[d]||a;return n?r.a.createElement(h,c(c({ref:t},m),{},{components:n})):r.a.createElement(h,c({ref:t},m))}));function h(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=d;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:o,i[1]=c;for(var m=2;m<a;m++)i[m]=n[m];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);