8e12031f.7337531d.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{134:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return d}));var a=n(0),r=n.n(a);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=r.a.createContext({}),s=function(e){var t=r.a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},b=function(e){var t=s(e.components);return r.a.createElement(i.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},p=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,l=e.originalType,o=e.parentName,i=u(e,["components","mdxType","originalType","parentName"]),b=s(n),p=a,d=b["".concat(o,".").concat(p)]||b[p]||m[p]||l;return n?r.a.createElement(d,c(c({ref:t},i),{},{components:n})):r.a.createElement(d,c({ref:t},i))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=n.length,o=new Array(l);o[0]=p;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var i=2;i<l;i++)o[i]=n[i];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}p.displayName="MDXCreateElement"},162:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/useMemo-useCallback-6079b13a6406d1ff65bd36063dd35fdb.png"},99:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return s}));var a=n(3),r=n(7),l=(n(0),n(134)),o={slug:"usememo-and-usecallback",title:"When to useMemo and useCallback?",author:"Bunlong",author_title:"React Patterns Team",author_url:"https://github.com/Bunlong",author_image_url:"https://avatars1.githubusercontent.com/u/37023003?s=400&u=0049c6773040efb265cdf622076305f8b47facec&v=4",tags:["hooks","useMemo","useCallback"],image:"/img/useMemo-useCallback.png"},c={permalink:"/blog/usememo-and-usecallback",source:"@site/blog/2020-11-22-usememo-and-usecallback.md",description:"When to useMemo and useCallback?",date:"2020-11-22T00:00:00.000Z",tags:[{label:"hooks",permalink:"/blog/tags/hooks"},{label:"useMemo",permalink:"/blog/tags/use-memo"},{label:"useCallback",permalink:"/blog/tags/use-callback"}],title:"When to useMemo and useCallback?",readingTime:.925,truncated:!0,prevItem:{title:"Optimize Your Promise by Using Async/Await in React",permalink:"/blog/optimize-your-promise-by-using-async-await-in-react"}},u=[{value:"Differences",id:"differences",children:[{value:"useMemo",id:"usememo",children:[]},{value:"useCallback",id:"usecallback",children:[]}]},{value:"Similars",id:"similars",children:[{value:"Syntax",id:"syntax",children:[]}]}],i={rightToc:u};function s(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(l.b)("wrapper",Object(a.a)({},i,o,{components:t,mdxType:"MDXLayout"}),Object(l.b)("p",null,Object(l.b)("img",{alt:"When to useMemo and useCallback?",src:n(162).default,title:"When to useMemo and useCallback?"})),Object(l.b)("p",null,"React library provides us two built-in hooks to optimize the performance of our applications are ",Object(l.b)("inlineCode",{parentName:"p"},"useMemo")," and ",Object(l.b)("inlineCode",{parentName:"p"},"useCallback"),"."),Object(l.b)("p",null,"The usage of this two built-in hooks is quite similar so it can get confusing about when to use each. To clear that confusion, let's dig in and understand the actual difference and the correct way to use them both."),Object(l.b)("h2",{id:"differences"},"Differences"),Object(l.b)("h3",{id:"usememo"},"useMemo"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},"Call a function and return its result"),Object(l.b)("li",{parentName:"ul"},"Uses reference equality to prevent unnecessary renders")),Object(l.b)("h3",{id:"usecallback"},"useCallback"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},"Call a function and return the function without calling it"),Object(l.b)("li",{parentName:"ul"},"Prevent a function from being recreated when app is rerendered")),Object(l.b)("h2",{id:"similars"},"Similars"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},"Both return a new value, just when one of the dependencies value changes"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"1st argument"),": a function"),Object(l.b)("li",{parentName:"ul"},Object(l.b)("strong",{parentName:"li"},"2nd argument"),": an array of dependencies")),Object(l.b)("h3",{id:"syntax"},"Syntax"),Object(l.b)("h4",{id:"usememo-1"},"useMemo"),Object(l.b)("pre",null,Object(l.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"const hello = () => {\n  return 'world';\n};\n\nconst memoizedResult = useMemo(hello, []);\nmemoizedResult; // 'world'\n")),Object(l.b)("h4",{id:"usecallback-1"},"useCallback"),Object(l.b)("pre",null,Object(l.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"const hello = () => {\n  return 'world';\n}\n\nconst memoizedCallback = useCallback(hello, []);\nmemoizedCallback(); // 'world'\n")))}s.isMDXComponent=!0}}]);