var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(a,n)=>()=>{try{return n||a((n={exports:{}}).exports,n),n.exports}catch(s){throw n=0,s}},f=(a,n)=>{for(var s in n)t(a,s,{get:n[s],enumerable:!0})},o=(a,n,s,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of u(n))!k.call(a,c)&&c!==s&&t(a,c,{get:()=>n[c],enumerable:!(l=m(n,c))||l.enumerable});return a};var y=(a,n,s)=>(s=a!=null?h(N(a)):{},o(n||!a||!a.__esModule?t(s,"default",{value:a,enumerable:!0}):s,a)),w=a=>o(t({},"__esModule",{value:!0}),a);var r=g((C,i)=>{i.exports=_jsx_runtime});var b={};f(b,{default:()=>d,frontmatter:()=>x});var e=y(r()),x={title:"\u269B\uFE0F Memoization in React",date:"2025-03-22",lastmod:"2025-03-22",tags:["react18","react","tech","useMemo","useCallback","memoization"],language:"en",draft:!1,summary:"When you use React, you might see your page becoming slow or some components rendering again and again.",authors:["elifnurkarakoc"],layout:"PostLayout"};function p(a){let n={a:"a",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...a.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.p,{children:"When you use React, you might see your page becoming slow or some components rendering again and again. This is more common in e-commerce apps \u2014 like when filtering products, adding to cart, or showing product lists."}),` `,(0,e.jsxs)(n.p,{children:["Here, ",(0,e.jsx)(n.strong,{children:"memoization"})," (keeping values in memory) helps improve performance."]}),` `,(0,e.jsxs)(n.p,{children:["But if you use it in the wrong place, it can make your code more complex. In this post, I will explain ",(0,e.jsx)(n.code,{children:"useMemo"}),", ",(0,e.jsx)(n.code,{children:"useCallback"}),", and ",(0,e.jsx)(n.code,{children:"React.memo"}),", when they are useful, and how to use them correctly."]}),` `,(0,e.jsxs)(n.h2,{id:"what-is-memoization",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#what-is-memoization",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"What Is Memoization?"]}),` `,(0,e.jsx)(n.p,{children:"Memoization means saving a result in memory. If you use the same input again, React gives you the saved result. It doesn\u2019t calculate it again."}),` `,(0,e.jsx)(n.p,{children:"In React, we use memoization to make rendering faster."}),` `,(0,e.jsxs)(n.h2,{id:"short-definitions",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#short-definitions",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Short Definitions"]}),` `,(0,e.jsxs)(n.h3,{id:"reactmemo",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#reactmemo",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"React.memo"]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"Wraps a functional component. If the props don\u2019t change, it doesn\u2019t re-render."}),` `]}),` `,(0,e.jsxs)(n.p,{children:["\u{1F4CC} ",(0,e.jsx)(n.strong,{children:"Why use it?"})]}),` `,(0,e.jsx)(n.p,{children:"To stop unnecessary re-renders. It compares props with shallow check."}),` `,(0,e.jsx)(n.hr,{}),` `,(0,e.jsxs)(n.h3,{id:"usememo",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#usememo",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"useMemo"]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"Saves a calculated value in memory."}),` `]}),` `,(0,e.jsxs)(n.p,{children:["\u{1F4CC} ",(0,e.jsx)(n.strong,{children:"Why use it?"})]}),` `,(0,e.jsx)(n.p,{children:"To avoid doing the same calculation again on every render."}),` `,(0,e.jsx)(n.hr,{}),` `,(0,e.jsxs)(n.h3,{id:"usecallback",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#usecallback",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"useCallback"]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsx)(n.p,{children:"Saves a function in memory, so it has the same reference if nothing changes."}),` `]}),` `,(0,e.jsxs)(n.p,{children:["\u{1F4CC} ",(0,e.jsx)(n.strong,{children:"Why use it?"})]}),` `,(0,e.jsx)(n.p,{children:"To stop re-renders when sending functions as props to other components."}),` `,(0,e.jsxs)(n.p,{children:["\u{1F514} Note: These are useful only during ",(0,e.jsx)(n.strong,{children:"re-renders"}),". Using them too much can ",(0,e.jsx)(n.strong,{children:"slow down the first render"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["\u{1F4CC} Only use ",(0,e.jsx)(n.code,{children:"useMemo"})," and ",(0,e.jsx)(n.code,{children:"useCallback"})," for ",(0,e.jsx)(n.strong,{children:"reference types"})," like objects, arrays, or functions \u2014 not numbers or strings."]}),` `,(0,e.jsxs)(n.h2,{id:"examples-of-memoization",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#examples-of-memoization",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Examples of Memoization"]}),` `,(0,e.jsxs)(n.h3,{id:"1-reactmemo--example-product-card-in-order-history",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#1-reactmemo--example-product-card-in-order-history",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"1. React.memo \u2013 Example: Product Card in Order History"]}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," memo ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"react"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"Product"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" id",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"number"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" name",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" price",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"number"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" image",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token builtin",children:"string"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"Props"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" product",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Product"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"OrderProductCard"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," product ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Props"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"order-product-card",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"img"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"src"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"product",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"image"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"alt"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"product",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"name"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"loading"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"lazy",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"h3"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"product",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"name"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"product",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"price"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" \u20BA"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token function",children:"memo"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"OrderProductCard"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `})]})}),` `,(0,e.jsx)(n.p,{children:"\u2705 When to use?"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"When you show a list of past orders and product data does not change."}),` `,(0,e.jsxs)(n.li,{children:["If the ",(0,e.jsx)(n.code,{children:"product"})," object is the same, the component does not re-render."]}),` `,(0,e.jsx)(n.li,{children:"Good for long product lists."}),` `]}),` `,(0,e.jsxs)(n.p,{children:["\u26A0\uFE0F ",(0,e.jsx)(n.code,{children:"React.memo"})," does a ",(0,e.jsx)(n.strong,{children:"shallow check"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["If you send a new object every time (like ",(0,e.jsx)(n.code,{children:"{ id: 1, name: 'Test' }"}),"), it will re-render anyway. In that case, use ",(0,e.jsx)(n.code,{children:"useMemo"})," outside the component to fix it."]}),` `,(0,e.jsxs)(n.h3,{id:"2-usememo--example-filter-products",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#2-usememo--example-filter-products",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"2. useMemo \u2013 Example: Filter Products"]}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"ProductList"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," products",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," selectedCategories ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Props"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," filteredProducts ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useMemo"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," products",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"filter"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"product",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" selectedCategories",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"includes"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"product",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"category"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"products",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," selectedCategories",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"className"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:'"'}),"grid",(0,e.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"filteredProducts",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"product",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"OrderProductCard"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"product",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"id"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"product"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"product",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `})]})}),` `,(0,e.jsx)(n.p,{children:"\u2705 When to use?"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"When the product list is large,"}),` `,(0,e.jsx)(n.li,{children:"When filtering is slow or complex,"}),` `,(0,e.jsx)(n.li,{children:"To stop repeating the same calculation every render."}),` `]}),` `,(0,e.jsx)(n.p,{children:"\u2757 When not to use?"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"When the product list is small,"}),` `,(0,e.jsx)(n.li,{children:"When the filter is simple,"}),` `,(0,e.jsx)(n.li,{children:"When you use it just because you\u2019re used to it."}),` `]}),` `,(0,e.jsxs)(n.h3,{id:"3-usecallback--example-add-to-cart-function",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#3-usecallback--example-add-to-cart-function",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"3. useCallback \u2013 Example: Add to Cart Function"]}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," onAddToCart ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"productId",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"dispatch"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token function",children:"addToCart"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"productId",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"dispatch",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `})]})}),` `,(0,e.jsx)(n.p,{children:"\u2705 When to use?"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:["If this function goes to a memoized child component (like ",(0,e.jsx)(n.code,{children:"React.memo"}),"),"]}),` `,(0,e.jsx)(n.li,{children:"If you don\u2019t want the function to change every render."}),` `]}),` `,(0,e.jsx)(n.p,{children:"\u2757 When not to use?"}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"If you use the function in a simple button,"}),` `,(0,e.jsx)(n.li,{children:"If the function is not sent as a prop,"}),` `,(0,e.jsx)(n.li,{children:"If the other component is not memoized."}),` `]}),` `,(0,e.jsxs)(n.h2,{id:"should-we-use-it-everywhere",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#should-we-use-it-everywhere",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Should We Use It Everywhere?"]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.strong,{children:"No."})," If you use memoization in the wrong place, it can:"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Make your code harder to read,"}),` `,(0,e.jsx)(n.li,{children:"Use more memory,"}),` `,(0,e.jsx)(n.li,{children:"Slow down the first render,"}),` `,(0,e.jsx)(n.li,{children:"Make your app harder to maintain."}),` `]}),` `,(0,e.jsxs)(n.h3,{id:"wrong-example-1",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#wrong-example-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"\u{1F53B}Wrong Example 1:"]}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"Summary"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," total ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useMemo"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token number",children:"100"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token number",children:"200"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Total: "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"total",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:" \u20BA"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `})]})}),` `,(0,e.jsxs)(n.p,{children:["This is a simple calculation. Using ",(0,e.jsx)(n.code,{children:"useMemo"})," here is not helpful."]}),` `,(0,e.jsxs)(n.h3,{id:"wrong-example-2",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#wrong-example-2",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"\u{1F53B}Wrong Example 2:"]}),` `,(0,e.jsx)(n.pre,{className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"Button"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," handleClick ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:'"Clicked"'}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"handleClick",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Click"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `})]})}),` `,(0,e.jsxs)(n.p,{children:["If you are not sending this function to another component, ",(0,e.jsx)(n.code,{children:"useCallback"})," is not needed."]}),` `,(0,e.jsxs)(n.h2,{id:"dont-optimize-without-measuring",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#dont-optimize-without-measuring",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Don\u2019t Optimize Without Measuring"]}),` `,(0,e.jsx)(n.p,{children:"Before you use memoization, make sure you really have a performance issue."}),` `,(0,e.jsxs)(n.h3,{id:"what-can-help-you",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#what-can-help-you",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"What Can Help You?"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"React Developer Tools"})," \u2013 to see re-renders,"]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"React Profiler + console.log"})," \u2013 to track what renders and when,"]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"Chrome DevTools Performance Tab"})," \u2013 to check performance time."]}),` `]}),` `,(0,e.jsx)(n.p,{children:"If there is no unnecessary re-render, optimization won\u2019t help."}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.em,{children:(0,e.jsx)(n.strong,{children:"First measure, then improve."})})}),` `,(0,e.jsxs)(n.h2,{id:"conclusion",children:[(0,e.jsx)(n.a,{className:"content-header-link",href:"#conclusion",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,e.jsx)(n.p,{children:"Memoization in React can help performance when you use it correctly."}),` `,(0,e.jsx)(n.p,{children:"It is very useful for product lists, order history, filters, and cart actions \u2014 especially in e-commerce apps."}),` `,(0,e.jsx)(n.p,{children:"But don\u2019t use it everywhere. Always decide based on measurement and your app\u2019s needs."}),` `,(0,e.jsxs)(n.p,{children:["In this post, I shared how to use ",(0,e.jsx)(n.code,{children:"React.memo"}),", ",(0,e.jsx)(n.code,{children:"useMemo"}),", and ",(0,e.jsx)(n.code,{children:"useCallback"})," \u2014 when to use them and when not to \u2014 with examples and simple explanations."]}),` `,(0,e.jsx)(n.p,{children:"A small optimization can make a big difference for users."}),` `,(0,e.jsx)(n.p,{children:"Thanks for reading \u{1F490}"}),` `,(0,e.jsx)(n.p,{children:(0,e.jsx)(n.strong,{children:"Elif"})})]})}function d(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,{...a,children:(0,e.jsx)(p,{...a})}):p(a)}return w(b);})(); ;return Component;

Hi, I am Elif Nur Karakoç

Recent Posts

⚛️ Memoization in React

Next.js: An Essential Guide — Part 1

Asynchronous Programming in JavaScript