var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var N=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(e,n)=>{for(var s in n)t(e,s,{get:n[s],enumerable:!0})},o=(e,n,s,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of d(n))!k.call(e,c)&&c!==s&&t(e,c,{get:()=>n[c],enumerable:!(l=m(n,c))||l.enumerable});return e};var y=(e,n,s)=>(s=e!=null?u(h(e)):{},o(n||!e||!e.__esModule?t(s,"default",{value:e,enumerable:!0}):s,e)),f=e=>o(t({},"__esModule",{value:!0}),e);var i=N((P,r)=>{r.exports=_jsx_runtime});var x={};g(x,{default:()=>b});var a=y(i());function p(e){let n=Object.assign({h2:"h2",p:"p",pre:"pre",code:"code",span:"span",a:"a",blockquote:"blockquote",h3:"h3",ol:"ol",li:"li",ul:"ul"},e.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h2,{id:"\u0645\u0642\u062F\u0645\u0647",children:"\u0645\u0642\u062F\u0645\u0647"}),` `,(0,a.jsx)(n.p,{children:`\u0645\u0645\u0648\u0622\u06CC\u0632\u06CC\u0634\u0646 \u06CC\u0627 \u0628\u0647 \u062E\u0627\u0637\u0631 \u0633\u067E\u0627\u0631\u06CC \u062A\u06A9\u0646\u06CC\u06A9\u06CC \u0647\u0633\u062A\u0634 \u06A9\u0647 \u06A9\u0645\u06A9 \u0645\u06CC\u06A9\u0646\u0647 \u0633\u0631\u0639\u062A \u0627\u062C\u0631\u0627 \u0634\u062F\u0646 \u062A\u0648\u0627\u0628\u0639 \u067E\u06CC\u0686\u06CC\u062F\u0647 \u0628\u06CC\u0634\u062A\u0631 \u0628\u0634\u0646. \u062A\u0648 \u0627\u06CC\u0646 \u0631\u0648\u0634 \u0628\u0627 \u0630\u062E\u06CC\u0631\u0647 \u06A9\u0631\u062F\u0646 \u0646\u062A\u06CC\u062C\u0647 \u0627\u062C\u0631\u0627 \u0634\u062F\u0646 \u062A\u0627\u0628\u0639 \u0648 \u0628\u0631\u06AF\u0631\u062F\u0648\u0646\u062F\u0646 \u0646\u062A\u06CC\u062C\u0647 \u0630\u062E\u06CC\u0631\u0647 \u0634\u062F\u0647 \u062F\u0631 \u0632\u0645\u0627\u0646\u06CC \u06A9\u0647 \u062A\u0627\u0628\u0639 \u0628\u0627 \u0647\u0645\u0648\u0646 \u0648\u0631\u0648\u062F\u06CC \u0647\u0627\u06CC \u0642\u0628\u0644\u06CC \u0635\u062F\u0627 \u0632\u062F\u0647 \u0634\u062F\u0647 \u0628\u0627\u0634\u0647 \u0627\u0632 \u0627\u062C\u0631\u0627 \u0634\u062F\u0646 \u062A\u0627\u0628\u0639 \u067E\u06CC\u0686\u06CC\u062F\u0647 \u062C\u0644\u0648\u06AF\u06CC\u0631\u06CC \u0645\u06CC\u06A9\u0646\u06CC\u0645 \u0648 \u0633\u0631\u0639\u062A \u0627\u062C\u0631\u0627 \u0627\u0641\u0632\u0627\u06CC\u0634 \u067E\u06CC\u062F\u0627 \u0645\u06CC\u06A9\u0646\u0647.\r \u062F\u0631 \u0627\u062F\u0627\u0645\u0647\u200C\u06CC \u0627\u06CC\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0627 \u0645\u062B\u0627\u0644 \u0627\u0644\u06AF\u0648\u0631\u06CC\u062A\u0645 \u067E\u06CC\u062F\u0627 \u0639\u062F\u062F \u0627\u0648\u0644 \u062F\u0631 \u0632\u0628\u0627\u0646 \u062C\u0627\u0648\u0627\u0633\u06A9\u0631\u06CC\u067E\u062A \u0627\u06CC\u0646 \u0627\u0644\u06AF\u0648\u0631\u06CC\u062A\u0645 \u0648 \u0628\u06CC\u0634\u062A\u0631 \u062A\u0648\u0636\u06CC\u062D \u0645\u06CC\u062F\u0645 \u0648 \u062F\u0631 \u0627\u062E\u0631 \u062F\u0631\u0628\u0627\u0631\u0647 memo \u0648 \u0647\u0648\u06A9\u200C\u0647\u0627\u06CC useMemo \u0648 useCallback \u0628\u06CC\u0634\u062A\u0631 \u0635\u062D\u0628\u062A \u0645\u06CC\u06A9\u0646\u0645.`}),` `,(0,a.jsx)(n.h2,{id:"\u062A\u0627\u0628\u0639-\u067E\u06CC\u062F\u0627-\u06A9\u0631\u062F\u0646-\u0639\u062F\u062F-\u0627\u0648\u0644",children:"\u062A\u0627\u0628\u0639 \u067E\u06CC\u062F\u0627 \u06A9\u0631\u062F\u0646 \u0639\u062F\u062F \u0627\u0648\u0644"}),` `,(0,a.jsx)(n.p,{children:`\u0628\u06CC\u0627\u06CC\u062F \u0628\u0627 \u06CC\u06A9 \u0645\u062B\u0627\u0644 \u062E\u06CC\u0644\u06CC \u0633\u0627\u062F\u0647 \u0648 \u0627\u0644\u06AF\u0648\u0631\u06CC\u062A\u0645 \u067E\u06CC\u062F\u0627 \u06A9\u0631\u062F\u0646 \u0639\u062F\u062F \u0627\u0648\u0644 \u0634\u0631\u0648\u0639 \u06A9\u0646\u06CC\u0645. \u0639\u062F\u062F \u0627\u0648\u0644 \u0639\u062F\u062F\u06CC\u0633\u062A \u06A9\u0647 \u0627\u0632 \u06F1 \u0628\u0632\u0631\u06AF\u062A\u0631\u0647 \u0648 \u0628\u0647 \u062C\u0632 \u0639\u062F\u062F \u06F1 \u0648 \u062E\u0648\u062F \u0627\u0648\u0646 \u0639\u062F\u062F \u0628\u0631 \u0647\u06CC\u0686 \u0639\u062F\u062F \u0645\u062B\u0628\u062A \u062F\u06CC\u06AF\u0647\u200C\u0627\u06CC \u062A\u0642\u0633\u06CC\u0645 \u067E\u0630\u06CC\u0631 \u0646\u06CC\u0633\u062A. (\u06CC\u0639\u0646\u06CC \u0627\u06AF\u0631 \u0628\u062E\u0648\u0627\u06CC\u0645 \u0628\u0628\u06CC\u0646\u06CC\u0645 \u0639\u062F\u062F \u06F1\u06F7 \u0627\u0648\u0644 \u0647\u0633\u062A\u0634 \u06CC\u0627 \u0646\u0647\u060C \u06A9\u0627\u0641\u06CC\u0647 \u0628\u0647 \u0647\u06CC\u0686 \u06A9\u062F\u0648\u0645 \u0627\u0632 \u0627\u0639\u062F\u0627\u062F \u0628\u06CC\u0646 \u06F2 \u062A\u0627 \u06F1\u06F6 \u062A\u0642\u0633\u06CC\u0645 \u067E\u0630\u06CC\u0631 \u0646\u0628\u0627\u0634\u0647)\r \u06CC\u06A9\u06CC \u0627\u0632 \u0631\u0627\u062D\u062A \u062A\u0631\u06CC\u0646 \u0631\u0648\u0634 \u0647\u0627\u06CC\u06CC \u0628\u0631\u0627\u06CC \u062D\u0644 \u0627\u06CC\u0646 \u0645\u062B\u0627\u0644 \u0648\u062C\u0648\u062F \u062F\u0627\u0631\u0647 brute-force \u0647\u0633\u062A\u0634 \u0628\u0647 \u0627\u06CC\u0646 \u0635\u0648\u0631\u062A \u06A9\u0647 \u062A\u0645\u0627\u0645 \u0639\u062F\u062F \u0647\u0627\u06CC\u06CC \u0628\u06CC\u0646 \u06F2 \u062A\u0627 \u062C\u0630\u0631 \u0627\u0648\u0646 \u0648\u062C\u0648\u062F \u062F\u0627\u0631\u0646 \u0648 \u062A\u0642\u0633\u06CC\u0645 \u0628\u0631 \u06F2 \u0645\u06CC\u06A9\u0646\u06CC\u0645\u060C \u0627\u0648\u0644\u06CC\u0646 \u062C\u0627\u06CC\u06CC \u06A9\u0647 \u0628\u0627\u0642\u06CC\u0645\u0627\u0646\u062F\u0647 \u0627\u06CC\u0646 \u062A\u0642\u0633\u06CC\u0645 \u06F0 \u0634\u062F \u0628\u0647 \u0627\u06CC\u0646 \u0646\u062A\u06CC\u062C\u0647 \u0645\u06CC\u0631\u0633\u06CC\u0645 \u06A9\u0647 \u0639\u062F\u062F \u0627\u0648\u0644 \u0646\u06CC\u0633\u062A. \u0627\u06AF\u0631 \u062A\u0627 \u0627\u062E\u0631 \u0627\u0644\u06AF\u0648\u0631\u06CC\u062A\u0645 \u0631\u0641\u062A\u06CC\u0645 \u0648 \u0628\u0631\u0647\u06CC\u0686 \u0639\u062F\u062F\u06CC \u062A\u0642\u0633\u06CC\u0645 \u0646\u0634\u062F \u067E\u0633 \u062F\u0631\u0646\u062A\u06CC\u062C\u0647 \u0627\u0648\u0646 \u0639\u062F\u062F \u0627\u0648\u0644 \u0647\u0633\u062A\u0634.`}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"isPrime"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"num"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"num ",(0,a.jsx)(n.span,{className:"token operator",children:"<="})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"for"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"let"})," i ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," i ",(0,a.jsx)(n.span,{className:"token operator",children:"<="})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Math"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"sqrt"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"num",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," i",(0,a.jsx)(n.span,{className:"token operator",children:"++"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"num ",(0,a.jsx)(n.span,{className:"token operator",children:"%"})," i ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// \u2B50\uFE0F"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token boolean",children:"true"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` \r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` \r \r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token function",children:"isPrime"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"12"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// false"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token function",children:"isPrime"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"7"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// true "}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u0627\u06CC\u0646 \u062A\u0627\u0628\u0639 \u0628\u0647 \u062F\u0631\u0633\u062A\u06CC \u06A9\u0627\u0631 \u0645\u06CC\u06A9\u0646\u0647 \u0648 \u062E\u0637\u0627\u06CC\u06CC \u0646\u062F\u0627\u0631\u0647\u060C \u062A\u0646\u0647\u0627 \u0645\u0634\u06A9\u0644 \u0627\u06CC\u0646 \u0647\u0633\u062A\u0634 \u06A9\u0647 \u0628\u0631\u0627\u06CC \u0627\u0639\u062F\u0627\u062F \u0628\u0632\u0631\u06AF \u06CC\u06A9\u0645 \u06A9\u0646\u062F \u0639\u0645\u0644 \u0645\u06CC\u06A9\u0646\u0647. (\u0627\u06AF\u0631 \u06CC\u0647 \u0639\u062F\u062F \u0628\u0632\u0631\u06AF \u067E\u0627\u0633 \u0628\u062F\u06CC\u0645 \u0645\u062B\u0644\u0627 \u06F9\u06F9\u06F9\u06F9\u06F7 \u0642\u0633\u0645\u062A\u06CC \u06A9\u0647 \u2B50\uFE0F \u062F\u0627\u0631\u0647 \u0628\u0647 \u0627\u0646\u062F\u0627\u0632\u0647 \u062C\u0630\u0631 \u06F9\u06F9\u06F9\u06F9\u06F7 \u0628\u0627\u0631 \u0635\u062F\u0627 \u0645\u06CC\u0634\u0647) \u0645\u06CC\u062A\u0648\u0646\u06CC\u0645 \u0628\u0627 memoization \u062A\u0627\u0628\u0639 \u0631\u0648 \u0628\u0647\u06CC\u0646\u0647 \u062A\u0631 \u06A9\u0646\u06CC\u0645. \u0628\u0647 \u0627\u06CC\u0646 \u0635\u0648\u0631\u062A \u06A9\u0647 \u0628\u0647 \u062C\u0627\u06CC \u0627\u06CC\u0646\u06A9\u0647 \u0628\u0647 \u0627\u0632\u0627\u06CC \u0647\u0631 \u0628\u0627\u0631\u06CC \u06A9\u0647 \u062A\u0627\u0628\u0639 \u0635\u062F\u0627 \u0645\u06CC\u0634\u0647 \u0646\u062A\u06CC\u062C\u0647 \u0631\u0648 \u0627\u0632 \u0627\u0648\u0644 \u062D\u0633\u0627\u0628 \u06A9\u0646\u06CC\u0645 \u0648 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062C\u0648\u0627\u0628 \u062A\u0627\u0628\u0639 \u0642\u0631\u0627\u0631 \u0628\u062F\u06CC\u0645\u060C \u0646\u062A\u06CC\u062C\u0647 \u0627\u062C\u0631\u0627\u06CC \u062A\u0627\u0628\u0639 \u0631\u0648 \u0628\u0631\u06CC\u0632\u06CC\u0645 \u062A\u0648 \u06CC\u0647 \u0627\u0628\u062C\u06A9\u062A (\u0627\u0633\u0645\u0634 \u0645\u06CC\u0632\u0627\u0631\u06CC\u0645 cache) \u0648 \u062F\u0631\u0635\u0648\u0631\u062A\u06CC \u06A9\u0647 \u062A\u0627\u0628\u0639 \u062F\u0648\u0628\u0627\u0631\u0647 \u0628\u0627 \u0647\u0645\u06CC\u0646 \u0645\u0642\u062F\u0627\u0631 \u0648\u0631\u0648\u062F\u06CC \u0635\u062F\u0627 \u0634\u062F \u0646\u062A\u06CC\u062C\u0647 \u0642\u0628\u0644\u06CC \u0631\u0648 \u0627\u0632 \u06A9\u0634 \u0645\u06CC\u062E\u0648\u0646\u06CC\u0645 \u0648 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062C\u0648\u0627\u0628 \u062A\u0627\u0628\u0639 \u0645\u06CC\u0632\u0627\u0631\u06CC\u0645."}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"memoizedIsPrime"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// 1\uFE0F\u20E3"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"let"})," cache ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"num"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// 2\uFE0F\u20E3"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," cacheKey ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," num",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"cache",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"cacheKey",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," cache",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"cacheKey",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r cosnt result `,(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"isPrime"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"num",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r cache`,(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"cacheKey",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," result",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," result",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," memoizedIsPrime ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"memoizedIsPrime"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token function",children:"memoizedIsPrime"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"12"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// false"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token function",children:"memoizedIsPrime"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"7"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// true "}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u06A9\u0627\u0631\u06CC \u06A9\u0647 \u062A\u0648 \u0642\u0637\u0639\u0647 \u06A9\u062F \u0628\u0627\u0644\u0627 \u06A9\u0631\u062F\u06CC\u0645 \u0627\u06CC\u0646 \u0628\u0648\u062F \u06A9\u0647 \u06CC\u0647 \u062A\u0627\u0628\u0639 \u062C\u062F\u06CC\u062F \u0633\u0627\u062E\u062A\u06CC\u0645 \u0628\u0647 \u0646\u0627\u0645 memoizedIsPrime (1\uFE0F\u20E3) \u06A9\u0647 \u062F\u0631\u0646\u062A\u06CC\u062C\u0647 \u0635\u062F\u0627 \u0634\u062F\u0646\u0634 \u0628\u0647 \u0645\u0627 \u06CC\u0647 \u062A\u0627\u0628\u0639 \u062F\u06CC\u06AF\u0647 (2\uFE0F\u20E3) \u0645\u06CC\u062F\u0647 \u06A9\u0647 \u0627\u06CC\u0646 \u062A\u0627\u0628\u0639 \u0628\u0647 \u0635\u0648\u0631\u062A \u063A\u06CC\u0631 \u0645\u0633\u062A\u0642\u06CC\u0645 \u062A\u0627\u0628\u0639 isPrime \u0648 \u0635\u062F\u0627 \u0645\u06CC\u06A9\u0646."}),` `,(0,a.jsx)(n.p,{children:`\u0627\u062D\u062A\u0645\u0627\u0644\u0627 \u0633\u0648\u0627\u0644 \u0627\u0648\u0644\u06CC \u06A9\u0647 \u0628\u0631\u0627\u06CC \u0634\u0645\u0627 \u067E\u06CC\u0634 \u0645\u06CC\u0627\u062F \u0627\u06CC\u0646\u06A9\u0647 \u0686\u0631\u0627 \u0645\u0627 \u06CC\u0647 \u062A\u0627\u0628\u0639 \u0633\u0627\u062E\u062A\u06CC\u0645 \u06A9\u0647 \u06CC\u0647 \u062A\u0627\u0628\u0639 \u062F\u06CC\u06AF\u0647 \u0628\u0633\u0627\u0632\u0647 \u06A9\u0647 \u062F\u0627\u062E\u0644 \u0627\u0648\u0646 \u0628\u06CC\u0627\u06CC\u0645 isPrime \u0648 \u0635\u062F\u0627\u06A9\u0646\u06CC\u0645\u061F\r \u062F\u0631 \u06CC\u06A9 \u06A9\u0644\u0645\u0647 \u062E\u0644\u0627\u0635\u0647 \u0628\u062E\u0648\u0627\u062F \u06AF\u0641\u062A\u0647 \u0628\u0634\u0647 clouser\u060C \u0628\u0628\u06CC\u0646\u06CC\u062F \u0627\u0648\u0646 \u0645\u062A\u063A\u06CC\u0631 cache \u06A9\u0647 \u062A\u0648 \u062E\u0637 \u062F\u0648\u0645 \u062A\u0627\u0628\u0639 \u0633\u0627\u062E\u062A\u0647 \u0634\u062F\u0647 \u0646\u062A\u06CC\u062C\u0647 \u0627\u062C\u0631\u0627 \u0634\u062F\u0646 \u0647\u0627\u06CC \u062A\u0627\u0628\u0639 \u0631\u0648 \u0630\u062E\u06CC\u0631\u0647 \u0645\u06CC\u06A9\u0646\u0647 \u0648 \u0627\u0648\u0646 \u062A\u0627\u0628\u0639\u06CC \u06A9\u0647 return \u0634\u062F\u0647 (2\uFE0F\u20E3) \u0627\u0632 \u0627\u06CC\u0646 cache \u06A9\u0647 \u062F\u0627\u062E\u0644 clousre \u062E\u0648\u062F\u0634 \u0642\u0631\u0627\u0631 \u062F\u0627\u0631\u0647 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC\u06A9\u0646\u0647.`}),` `,(0,a.jsxs)(n.p,{children:[`\u0633\u0648\u0627\u0644 \u062F\u0648\u0645\u06CC \u06A9\u0647 \u0645\u0645\u06A9\u0646\u0647 \u067E\u06CC\u0634 \u0628\u06CC\u0627\u062F \u0627\u06CC\u0646\u06A9\u0647 \u0627\u0648\u0646 cache \u0648 cacheKey \u0686\u06CC \u0647\u0633\u062A\u0634\u061F\r \u06AF\u0641\u062A\u06CC\u0645 \u06A9\u0647 \u0645\u062A\u063A\u06CC\u0631 cache \u06CC\u0647 \u0627\u0628\u062C\u06A9\u062A \u0633\u0627\u062F\u0647\u200C\u0633\u062A\u060C \u0648 \u0627\u0628\u062C\u06A9\u062A \u0647\u0627 \u062A\u0648 javascript \u0627\u0632 \u06F2 \u0628\u062E\u0634 \u06A9\u0644\u06CC\u062F \u0648 \u0645\u0642\u062F\u0627\u0631 \u0633\u0627\u062E\u062A\u0647 \u0634\u062F\u0646 `,(0,a.jsx)(n.code,{children:"{ key: value }"}),` \u0628\u0631\u0627\u06CC \u0627\u06CC\u0646\u06A9\u0647 \u0628\u062A\u0648\u0646\u06CC\u0645 \u0646\u062A\u06CC\u062C\u0647 \u0630\u062E\u06CC\u0631\u0647 \u0634\u062F\u0646 \u0627\u06CC\u0646 \u062A\u0627\u0628\u0639 \u0631\u0648 \u062F\u0627\u062E\u0644 \u0627\u0628\u062C\u06A9\u062A \u0630\u062E\u06CC\u0631\u0647 \u06A9\u0646\u06CC\u0645 \u0646\u06CC\u0627\u0632 \u062F\u0627\u0631\u06CC\u0645 \u0628\u0647 \u06CC\u06A9 \u06A9\u0644\u06CC\u062F \u0648 \u06A9\u0644\u06CC\u062F \u0628\u0627\u06CC\u062F \u0628\u0647 \u0635\u0648\u0631\u062A\u06CC \u0628\u0627\u0634\u0647 \u06A9\u0647 \u0627\u06AF\u0631 \u062F\u0641\u0639\u0647 \u0628\u0639\u062F\u06CC \u0647\u0645\u06CC\u0646 \u062A\u0627\u0628\u0639 \u0631\u0648 \u0628\u0627 \u0647\u0645\u06CC\u0646 \u0648\u0631\u0648\u062F\u06CC \u0635\u062F\u0627 \u06A9\u0631\u062F\u06CC\u0645 \u0647\u0645\u06CC\u0646 \u06A9\u0644\u06CC\u062F \u0641\u0639\u0644\u06CC \u0633\u0627\u062E\u062A\u0647 \u0628\u0634\u0647 \u0648 \u0647\u0631\u062F\u0641\u0639\u0647 \u06CC\u0647 \u0645\u0642\u062F\u0627\u0631 \u0631\u0646\u062F\u0645 \u063A\u06CC\u0631 \u0642\u0627\u0628\u0644 \u062D\u062F\u0633\u06CC \u0646\u0633\u0627\u0632\u0647 (\u0628\u0627\u06CC\u062F predictable \u0628\u0627\u0634\u0647)\r \u0628\u0631\u0627\u06CC \u06A9\u0644\u06CC\u062F \u0645\u06CC\u062A\u0648\u0646\u06CC\u0645 \u0627\u0632 \u067E\u0627\u0631\u0627\u0645\u062A\u0631 (\u0647\u0627\u06CC) \u0648\u0631\u0648\u062F\u06CC \u062E\u0648\u062F \u062A\u0627\u0628\u0639 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u06A9\u0646\u06CC\u0645\u060C \u0647\u0631\u0628\u0627\u0631 \u06A9\u0647 \u062A\u0627\u0628\u0639 \u0635\u062F\u0627 \u0645\u06CC\u0634\u0647 \u0627\u06AF\u0631 \u0628\u0627 \u0647\u0645\u0648\u0646 \u0645\u0642\u062F\u0627\u0631 \u0642\u0628\u0644\u06CC \u0635\u062F\u0627 \u0632\u062F\u0647 \u0628\u0634\u0647 \u06A9\u0644\u06CC\u062F \u0642\u0628\u0644\u06CC \u0648 \u062F\u0627\u0631\u0647 \u0648 \u062F\u0631\u0646\u062A\u06CC\u062C\u0647 \u0645\u06CC\u062A\u0648\u0646\u06CC\u0645 \u0628\u062F\u0648\u0646 \u0635\u062F\u0627 \u06A9\u0631\u062F\u0646 \u062A\u0627\u0628\u0639 \u0646\u062A\u06CC\u062C\u0647 \u0631\u0648 \u0627\u0632 cache \u0628\u062E\u0648\u0646\u06CC\u0645 \u0648 \u0633\u0631\u0639\u062A \u0648 \u0628\u0627\u0644\u0627 \u0628\u0628\u0631\u06CC\u0645.`]}),` `,(0,a.jsx)(n.p,{children:"\u062D\u0627\u0644\u0627 \u0628\u0627 \u0627\u06CC\u0646 \u0631\u0648\u0634 \u0627\u06AF\u0631 \u062A\u0627\u0628\u0639 \u0631\u0648 \u0628\u0627 \u0647\u0645\u0648\u0646 \u0639\u062F\u062F \u06F9\u06F9\u06F9\u06F9\u06F7 \u0635\u062F\u0627 \u06A9\u0646\u06CC\u0645 \u0628\u0627\u0631 \u0627\u0648\u0644 \u0628\u0647 \u0627\u0646\u062F\u0627\u0632\u0647 \u062C\u0630\u0631 \u06F9\u06F9\u06F9\u06F9\u06F7 \u0628\u0627\u0631 \u0642\u0633\u0645\u062A \u2B50\uFE0F \u0635\u062F\u0627 \u0645\u06CC\u0634\u0647 \u0648 \u0628\u0639\u062F \u0627\u0632 \u0627\u0648\u0646 \u0627\u06AF\u0631 \u0647\u0632\u0627\u0631 \u0628\u0627\u0631 \u0647\u0645 \u062A\u0627\u0628\u0639 \u0631\u0648 \u0628\u0627 \u0647\u0645\u06CC\u0646 \u0639\u062F\u062F \u0635\u062F\u0627 \u06A9\u0646\u06CC\u0645 \u0642\u0633\u0645\u062A \u2B50\uFE0F \u06A9\u0644\u0627 \u0627\u062C\u0631\u0627 \u0646\u0645\u06CC\u0634\u0647 \u0648 \u0646\u062A\u06CC\u062C\u0647 \u0627\u0632 \u06A9\u0634 \u062E\u0648\u0646\u062F\u0647 \u0645\u06CC\u0634\u0647."}),` `,(0,a.jsxs)(n.p,{children:["\u062A\u0627\u0628\u0639 ",(0,a.jsx)(n.code,{children:"memoizedIsPrime"}),` \u0641\u0642\u0637 \u0645\u062E\u0635 \u062A\u0627\u0628\u0639 isPrime \u0647\u0633\u062A\u0634 \u0648 \u0627\u06AF\u0631 \u0628\u062E\u0648\u0627\u06CC\u0645 \u0628\u0631\u0627\u06CC \u062A\u06A9 \u062A\u06A9 \u062A\u0648\u0627\u0628\u0639\u06CC \u06A9\u0647 \u062F\u0627\u0631\u06CC\u0645 \u06CC\u0647 \u062A\u0627\u0628\u0639 \u062F\u0648\u0645 memoize \u0634\u062F\u0647 \u0628\u0646\u0648\u06CC\u0633\u06CC\u0645, \u0648 \u062E\u0628 \u06CC\u0647 \u067E\u062A\u0631\u0646 \u062E\u0627\u0635\u06CC \u062F\u0627\u062E\u0644 \u062A\u0645\u0627\u0645 \u062A\u0648\u0627\u0628\u0639\u06CC \u06A9\u0647 \u0646\u0648\u0634\u062A\u0647 \u0645\u06CC\u0634\u0647 \u0648\u062C\u0648\u062F \u062F\u0627\u0631\u0647 \u0647\u0645\u0634\u0648\u0646 \u06CC\u0647 cache \u062F\u0627\u0631\u0646 \u06A9\u0647 \u062F\u0627\u062E\u0644 closure \u0647\u0633\u062A\u0634 \u0648 \u062A\u0627\u0628\u0639\u06CC \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062C\u0648\u0627\u0628 \u0628\u0631\u0645\u06CC\u06AF\u0631\u062F\u0648\u0646\u0646 \u062F\u0627\u062E\u0644 cache \u0686\u06A9 \u0645\u06CC\u06A9\u0646\u0647 \u06A9\u0647 \u0627\u06CC\u0627 \u062C\u0648\u0627\u0628\u06CC \u0628\u0631\u0627\u06CC \u0627\u06CC\u0646 \u0648\u0631\u0648\u062F\u06CC \u0647\u0633\u062A\u0634 \u06CC\u0627 \u0646\u0647 \u0648 ...\r \u0628\u0627\u06CC\u062F \u06CC\u0647 \u0631\u0627\u0647\u06CC \u0628\u0627\u0634\u0647 \u06A9\u0647 \u0628\u062A\u0648\u0646\u06CC\u0645 \u062C\u0644\u0648\u06CC \u0627\u06CC\u0646\u0647\u0645\u0647 \u062F\u0648\u0628\u0627\u0631\u0647 \u0646\u0648\u06CC\u0633\u06CC \u0648 \u0628\u06AF\u06CC\u0631\u06CC\u0645! \u0648 \u0647\u0633\u062A\u0634`]}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"memoize"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"func"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," cache ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"function"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",children:[(0,a.jsx)(n.span,{className:"token spread operator",children:"..."}),"args"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," key ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"JSON"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"stringify"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"args",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"if"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"cache",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"key",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),` \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," cache",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"key",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` \r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," result ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," func",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"apply"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"this"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," args",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r cache`,(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"key",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," result",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," result",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` \r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` \r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` \r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," memoizedIsPrime ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"memoize"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"isPrime",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token function",children:"memoizedIsPrime"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"7"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// true"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token function",children:"memoizedIsPrime"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"12"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// false"}),` `]})}),` `,(0,a.jsxs)(n.p,{children:["\u062A\u0648 \u0642\u0637\u0639\u0647 \u06A9\u062F \u0628\u0627\u0644\u0627 \u062A\u0627\u0628\u0639 memoize \u0647\u0631\u062A\u0627\u0628\u0639\u06CC \u06A9\u0647 \u0628\u0647\u0634 \u0628\u062F\u06CC\u062F (\u0628\u0647 \u0627\u06CC\u0646 \u0646\u0648\u0639 \u062A\u0648\u0627\u0628\u0639 \u06A9\u0647 \u06CC\u06A9 \u062A\u0627\u0628\u0639 \u0631\u0648 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0631\u0648\u062F\u06CC \u0645\u06CC\u06AF\u06CC\u0631\u0646 \u0648 \u06CC\u0647 \u062A\u0627\u0628\u0639 \u062C\u062F\u06CC\u062F \u0628\u0647 \u0645\u0627 \u0645\u06CC\u062F\u0646 \u06AF\u0641\u062A\u0647 \u0645\u06CC\u0634\u0647 higher order function) \u0648 memozie \u0645\u06CC\u06A9\u0646\u0647 \u0648 \u0648\u0631\u0648\u062F\u06CC (\u0647\u0627\u06CC) \u062A\u0627\u0628\u0639 \u0631\u0648 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06A9\u0644\u06CC\u062F \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC\u06A9\u0646\u0647 \u0648 \u0628\u0631\u0627\u06CC \u0635\u062F\u0627 \u06A9\u0631\u062F\u0646 \u062A\u0627\u0628\u0639\u06CC \u06A9\u0647 \u0628\u0647\u0634 \u067E\u0627\u0633 \u062F\u0627\u062F\u0647 \u0634\u062F\u0647 \u0627\u0632 apply \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC\u06A9\u0646\u0647 ",(0,a.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply",children:"\u0627\u0637\u0644\u0627\u0639\u0627\u062A \u0628\u06CC\u0634\u062A\u0631 \u062F\u0631\u0628\u0627\u0631\u0647 apply"})]}),` `,(0,a.jsx)(n.h2,{id:"reactmemo-usememo-\u0648-usecallback",children:"React.memo, useMemo, \u0648 useCallback"}),` `,(0,a.jsx)(n.p,{children:"\u0631\u06CC\u200C\u0627\u06A9\u062A \u062A\u0627 \u0646\u0633\u062E\u0647 \u06F1\u06F8.\u06F2 \u0628\u06CC\u0634\u062A\u0631 \u0627\u0632 \u06F4 \u062A\u0627\u0628\u0639 \u0628\u0631\u0627\u06CC momize \u06A9\u0631\u062F\u0646 \u0645\u062A\u063A\u06CC\u0631\u0647\u0627 \u0648 \u062A\u0648\u0627\u0628\u0639 \u062F\u0627\u062E\u0644 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0648 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0647\u0627 \u062F\u0631\u0627\u062E\u062A\u06CC\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06CC\u0633 \u0647\u0627 \u06AF\u0630\u0627\u0634\u062A\u0647."}),` `,(0,a.jsx)(n.p,{children:"\u062A\u0627\u0628\u0639 React.memo \u06CC\u06A9 higher order component \u0647\u0633\u062A\u0634\u060C higher order componet \u062F\u0642\u06CC\u0642\u0627 \u0645\u062B\u0644 higher order function \u0647\u0627 \u0647\u0633\u062A\u0646 \u0648\u0644\u06CC \u0628\u0647 \u062C\u0627\u06CC \u0627\u06CC\u0646\u06A9\u0647 \u06CC\u0647 \u062A\u0627\u0628\u0639 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0631\u0648\u062F\u06CC \u0628\u06AF\u06CC\u0631\u0646 \u0648 \u0628\u0647 \u0645\u0627 \u06CC\u0647 \u062A\u0627\u0628\u0639 \u062C\u062F\u06CC\u062F \u0628\u062F\u0646\u060C \u0627\u0632 \u0645\u0627 \u06CC\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0631\u0648\u062F\u06CC \u0645\u06CC\u06AF\u06CC\u0631\u0646 \u0648 \u0628\u0647 \u0645\u0627 \u06CC\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u062C\u062F\u06CC\u062F \u0645\u06CC\u062F\u0646."}),` `,(0,a.jsx)(n.p,{children:"\u06A9\u0627\u0631 \u0627\u06CC\u0646 \u062A\u0627\u0628\u0639 \u062C\u0644\u0648\u06AF\u06CC\u0631\u06CC \u0627\u0632 \u0631\u06CC\u200C\u0631\u0646\u062F\u0631 \u0634\u062F\u0646 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u062F\u0631\u0635\u0648\u0631\u062A\u06CC \u06A9\u0647 \u0628\u0627 \u067E\u0631\u0627\u067E \u0647\u0627\u06CC \u06CC\u06A9\u0633\u0627\u0646 \u0635\u062F\u0627 \u0632\u062F\u0647 \u0634\u062F\u0647 \u0628\u0627\u0634\u0647 \u0647\u0633\u062A\u0634\u060C \u062F\u0642\u06CC\u0642\u0627 \u0645\u062B\u0644 \u062A\u0627\u0628\u0639 memoize \u06A9\u0647 \u0628\u0627\u0644\u0627\u062A\u0631 \u062A\u062D\u0644\u06CC\u0644 \u06A9\u0631\u062F\u06CC\u0645 \u0639\u0645\u0644 \u0645\u06CC\u06A9\u0646\u0647\u060C \u0628\u0627\u0631 \u0627\u0648\u0644 \u06A9\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0631\u0646\u062F\u0631 \u0645\u06CC\u0634\u0647 cache \u062E\u0627\u0644\u06CC\u0647 \u067E\u0633 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0648 \u0631\u0646\u062F\u0631 \u0645\u06CC\u06A9\u0646\u0647 \u0648 \u0646\u062A\u06CC\u062C\u0647 \u0631\u0646\u062F\u0631 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0648 \u062F\u0627\u062E\u0644 cache \u0645\u06CC\u0631\u06CC\u0632\u0647 \u0648 \u062F\u0641\u0639\u0647 \u0628\u0639\u062F\u06CC \u0627\u06AF\u0631 \u0628\u0627 \u0647\u0645\u0648\u0646 \u067E\u0627\u0631\u0627\u0645\u062A\u0631 (\u067E\u0631\u0627\u067E \u0647\u0627) \u0635\u062F\u0627 \u0632\u062F\u0647 \u0628\u0634\u0647 \u0646\u062A\u06CC\u062C\u0647 \u0631\u0648 \u0627\u0632 cache \u0645\u06CC\u062E\u0648\u0646\u0647 \u0648 \u062A\u0627\u0628\u0639\u06CC \u06A9\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0645\u0627 \u0647\u0633\u062A\u0634 \u0648 \u0627\u062C\u0631\u0627 \u0646\u0645\u06CC\u06A9\u0646\u0647."}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// src/Gretting.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Gretting rendered"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Hello, "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"name"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token comment",children:"// export default React.memo(Gretting); // 1\uFE0F\u20E3"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// 2\uFE0F\u20E3"}),`\r \r `,(0,a.jsx)(n.span,{className:"token comment",children:"// src/App.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"./Gretting"'}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setCount",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"increment"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"setCount"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"count is: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"increment",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"+1"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Gretting"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"Nima",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `]})}),` `,(0,a.jsx)(n.p,{children:"\u062F\u0631 \u0635\u0648\u0631\u062A\u06CC \u06A9\u0647 \u06A9\u062F \u0628\u0627\u0644\u0627\u0631\u0648 \u0627\u062C\u0631\u0627 \u06A9\u0646\u06CC\u0645 \u0645\u06CC\u0628\u06CC\u0646\u06CC\u0645 \u06A9\u0647 \u0628\u0627 \u0647\u0631\u0628\u0627\u0631 \u06A9\u0644\u06CC\u06A9 \u0628\u0631 \u0631\u0648\u06CC \u062F\u06A9\u0645\u0647 +1 \u0647\u0645 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A App (\u0628\u0647 \u0639\u0644\u062A \u0627\u06CC\u0646\u06A9\u0647 state \u0639\u0648\u0636 \u0634\u062F\u0647) \u0648 \u0647\u0645 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A Greeting \u0628\u0647 \u0639\u0644\u062A \u0627\u06CC\u0646\u06A9\u0647 \u067E\u062F\u0631\u0634 \u0631\u06CC\u200C\u0631\u0646\u062F\u0631 \u0634\u062F\u0647 \u062F\u0648\u0628\u0627\u0631\u0647 \u0631\u0646\u062F\u0631 \u0634\u062F\u0646."}),` `,(0,a.jsx)(n.p,{children:"\u062F\u0631\u0635\u0648\u0631\u062A\u06CC \u06A9\u0647 \u062E\u0637 1\uFE0F\u20E3 \u0631\u0648 \u0627\u0632 \u06A9\u0627\u0645\u0646\u062A \u062F\u0631\u0628\u06CC\u0627\u0631\u06CC\u0645 \u0648 \u062E\u0637 2\uFE0F\u20E3 \u0631\u0648 \u06A9\u0627\u0645\u0646\u062A \u06A9\u0646\u06CC\u0645 \u0648 \u0627\u0632 \u0627\u0648\u0644 \u0631\u0648\u06CC \u062F\u06A9\u0645\u0647 +1 \u06A9\u0644\u06CC\u06A9 \u06A9\u0646\u06CC\u0645 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A Gretting \u062F\u06CC\u06AF\u0647 \u062F\u0648\u0628\u0627\u0631\u0647 \u0631\u06CC\u200C\u0631\u0646\u062F\u0631 \u0646\u0645\u06CC\u0634\u0647 \u0648 \u0641\u0642\u0637 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A App \u0631\u06CC\u200C\u0631\u0646\u062F\u0631 \u0645\u06CC\u0634\u0647"}),` `,(0,a.jsxs)(n.blockquote,{children:[` `,(0,a.jsx)(n.p,{children:"\u062D\u0627\u0644\u0627 \u0628\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A Gretting \u06CC\u0647 \u067E\u0631\u0627\u067E \u062C\u062F\u06CC\u062F \u0628\u062F\u06CC\u062F \u0648 \u0645\u0642\u062F\u0627\u0631 count \u0648 \u062F\u0627\u062E\u0644\u0634 \u0628\u0631\u06CC\u0632\u06CC\u062F \u0648 \u0631\u0648\u06CC button \u06A9\u0644\u06CC\u06A9 \u0648 \u0628\u0628\u06CC\u0646\u06CC\u062F \u0686\u06CC \u0645\u06CC\u0634\u0647."}),` `]}),` `,(0,a.jsx)(n.p,{children:"\u0642\u0628\u0644 \u0627\u0632 \u0627\u06CC\u0646\u06A9\u0647 \u0627\u062F\u0627\u0645\u0647 \u0628\u062F\u06CC\u0645 \u0628\u0631\u06CC\u0645 \u0642\u0633\u0645\u062A \u0628\u0639\u062F\u06CC \u0644\u0627\u0632\u0645\u0647 \u06CC\u06A9 \u06CC\u0627\u062F\u0627\u0648\u0631\u06CC \u0631\u0648\u06CC \u0639\u0645\u0644\u06AF\u0631 \u0645\u0642\u0627\u06CC\u0633\u0647 \u062A\u0648 \u062C\u0627\u0648\u0627\u0633\u06A9\u0631\u06CC\u067E\u062A \u062F\u0627\u0634\u062A\u0647 \u0628\u0627\u0634\u06CC\u0645"}),` `,(0,a.jsx)(n.h3,{id:"\u0645\u0642\u0627\u06CC\u0633\u0647-\u0628\u0631\u0627\u0633\u0627\u0633-\u0631\u0641\u0631\u0646\u0633",children:"\u0645\u0642\u0627\u06CC\u0633\u0647 \u0628\u0631\u0627\u0633\u0627\u0633 \u0631\u0641\u0631\u0646\u0633"}),` `,(0,a.jsxs)(n.p,{children:["\u06F2 \u062A\u0627 \u0627\u0628\u062C\u06A9\u062A \u0628\u0627\u0647\u0645 \u0628\u0631\u0627\u0628\u0631\u0646\u062F \u0627\u06AF\u0631 \u0628\u0647 \u06CC\u06A9 \u0627\u062F\u0631\u0633 \u062A\u0648 \u062D\u0627\u0641\u0638\u0647 \u0627\u0634\u0627\u0631\u0647 \u06A9\u0646\u0646\u062F\u060C \u0627\u06CC\u0646 \u0628\u0647 \u0627\u06CC\u0646 \u0645\u0639\u0646\u06CC\u0647 \u06A9\u0647 ",(0,a.jsx)(n.code,{children:"{} === {}"})," \u0646\u062A\u06CC\u062C\u0647\u200C\u0634 \u0645\u06CC\u0634\u0647 false \u0686\u0648\u0646 \u06F2 \u062A\u0627 \u0627\u0628\u062C\u06A9\u062A \u062F\u0627\u0631\u06CC\u0645 \u062A\u0648 \u06F2 \u062C\u0627\u06CC \u0645\u062A\u062E\u0644\u0641 \u062A\u0648 \u062D\u0627\u0641\u0638\u0647 \u0648 \u0627\u062F\u0631\u0633\u0634\u0648\u0646 \u0628\u0627\u0647\u0645 \u0645\u062A\u0641\u0627\u0648\u062A\u0647"]}),` `,(0,a.jsx)(n.pre,{className:"language-js",children:(0,a.jsxs)(n.code,{className:"language-js",children:[`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"nima"'})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token string",children:'"nima"'})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// true"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="}),(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// true"}),`\r \r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// false"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// false"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"name"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react.ir"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"name"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react.ir"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// false"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," a ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," b ",(0,a.jsx)(n.span,{className:"token operator",children:"="}),` a\r \r a `,(0,a.jsx)(n.span,{className:"token operator",children:"==="})," b ",(0,a.jsx)(n.span,{className:"token comment",children:"// true"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," c ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," b ",(0,a.jsx)(n.span,{className:"token operator",children:"="}),` c\r \r b `,(0,a.jsx)(n.span,{className:"token operator",children:"==="})," c ",(0,a.jsx)(n.span,{className:"token comment",children:"// true"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," e ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"name"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react.ir"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," f ",(0,a.jsx)(n.span,{className:"token operator",children:"="}),` e\r \r e `,(0,a.jsx)(n.span,{className:"token operator",children:"==="})," f ",(0,a.jsx)(n.span,{className:"token comment",children:"// true"}),`\r \r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," g ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"name"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"nima"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," h ",(0,a.jsx)(n.span,{className:"token operator",children:"="}),` g\r \r g `,(0,a.jsx)(n.span,{className:"token operator",children:"==="})," h ",(0,a.jsx)(n.span,{className:"token comment",children:"// true"}),`\r \r \r `,(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Object"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"is"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// false"}),`\r `,(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Object"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"is"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// false"}),`\r `,(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Object"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"is"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token boolean",children:"false"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// true"}),`\r `,(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Object"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"is"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"a",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," b",(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// true"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u062E\u0628 \u0645\u0645\u06A9\u0646\u0647 \u0628\u06AF\u06CC\u062F \u0686\u0647 \u0637\u0648\u0631\u06CC \u06F2 \u062A\u0627 \u0627\u0628\u062C\u06A9\u062A \u06A9\u0647 \u0627\u062F\u0631\u0633\u0634\u0648\u0646 \u0628\u0627\u0647\u0645 \u0645\u062A\u0641\u0627\u0648\u062A \u0647\u0633\u062A\u0634 \u0648 \u0628\u0627\u0647\u0645 \u0645\u0642\u0627\u06CC\u0633\u0647 \u06A9\u0646\u06CC\u0645\u061F \u06A9\u0627\u0641\u06CC\u0647 \u062A\u06A9 \u062A\u06A9 proeprty \u0647\u0627\u06CC\u06CC \u06A9\u0647 \u062F\u0627\u0631\u0646 \u0648 \u06CC\u06A9 \u0628\u0647 \u06CC\u06A9 \u0628\u0627\u0647\u0645 \u0645\u0642\u0627\u06CC\u0633\u0647 \u06A9\u0646\u06CC\u0645"}),` `,(0,a.jsx)(n.pre,{className:"language-js",children:(0,a.jsxs)(n.code,{className:"language-js",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," a ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"name"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react.ir"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," b ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"name"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react.ir"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r a `,(0,a.jsx)(n.span,{className:"token operator",children:"==="})," b ",(0,a.jsx)(n.span,{className:"token comment",children:"// false"}),`\r \r a`,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"name"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"==="})," b",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"name"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// true"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u06CC\u0647 \u0646\u06A9\u062A\u0647 \u062E\u06CC\u0644\u06CC \u0645\u0647\u0645 \u062F\u0631\u0628\u0627\u0631\u0647 \u062A\u0627\u0628\u0639 memo \u0627\u06CC\u0646\u06A9\u0647 \u0628\u0631\u0627\u0633\u0627\u0633 refrence \u067E\u0631\u0627\u067E \u0647\u0627\u06CC\u06CC \u06A9\u0647 \u0628\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u067E\u0627\u0633 \u0645\u06CC\u062F\u06CC\u062F \u0645\u06CC\u0641\u0647\u0645\u0647 \u06A9\u0647 \u0645\u06CC\u062A\u0648\u0646\u0647 \u0627\u0632 cache \u0645\u0642\u062F\u0627\u0631 \u0631\u0646\u062F\u0631 \u0634\u062F\u0647 \u0631\u0648 \u0628\u062E\u0648\u0646\u0647 \u0648 return \u0628\u06A9\u0646\u0647. \u0648 \u0627\u0635\u0644\u0627 \u0628\u0647 \u0627\u06CC\u0646 \u0635\u0648\u0631\u062A \u06A9\u0647 \u062A\u06A9 \u062A\u06A9 \u067E\u0631\u0627\u067E\u0631\u062A\u06CC \u0647\u0627\u06CC \u0627\u0648\u0646 \u0627\u0628\u062C\u06A9\u062A \u0647\u0627\u06CC\u06CC \u06A9\u0647 \u0628\u0647\u0634 \u067E\u0627\u0633 \u062F\u0627\u062F\u06CC\u062F \u0648 \u0645\u0642\u0627\u06CC\u0633\u0647 \u0628\u06A9\u0646\u0647 \u0646\u06CC\u0633\u062A."}),` `,(0,a.jsx)(n.p,{children:"\u062F\u0631\u0646\u062A\u06CC\u062C\u0647 \u06A9\u062F \u0632\u06CC\u0631 \u062F\u0631\u0633\u062A memo \u0646\u0645\u06CC\u06A9\u0646\u0647 \u0648 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0645\u0627 \u0628\u0627 \u0627\u06CC\u0646\u06A9\u0647 \u062F\u0627\u062E\u0644 memo \u0634\u062F\u0647 \u0647\u0631\u0628\u0627\u0631 \u06A9\u0647 \u067E\u062F\u0631\u0634 \u0631\u06CC\u200C\u0631\u0646\u062F\u0631 \u0645\u06CC\u0634\u0647 \u062F\u0648\u0628\u0627\u0631\u0647 \u0627\u0632 \u0627\u0648\u0644 \u0631\u0646\u062F\u0631 \u0645\u06CC\u0634\u0647"}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// src/Gretting.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Gretting rendered"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Hello, "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"user"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"name"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"memo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r \r `,(0,a.jsx)(n.span,{className:"token comment",children:"// src/App.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"./Gretting"'}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setCount",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"increment"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"setCount"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r `,(0,a.jsx)(n.span,{className:"token comment",children:"// refrecnce of this object, changes each time this component gets rerendred"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," user ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"user"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"Nima"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"count is: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"increment",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"+1"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Gretting"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"user"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})}),` `,(0,a.jsx)(n.h3,{id:"usememo",children:"useMemo"}),` `,(0,a.jsx)(n.p,{children:"\u06A9\u0627\u0631 \u0627\u06CC\u0646 \u0647\u0648\u06A9 \u062F\u0642\u06CC\u0642\u0627 \u0647\u0645\u0648\u0646\u0637\u0648\u0631\u06CC \u06A9\u0647 \u0627\u0632 \u0627\u0633\u0645\u0634 \u0645\u0634\u062E\u0635\u0647\u060C meomize \u06A9\u0631\u062F\u0646 \u0647\u0633\u062A\u0634. \u062E\u0628 \u0645\u0645\u06A9\u0646\u0647 \u0628\u06AF\u06CC\u062F \u0686\u0631\u0627 \u0647\u0645\u0648\u0646 \u062A\u0627\u0628\u0639 memo \u0648 \u0686\u0631\u0627 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0646\u0645\u06CC\u06A9\u0646\u06CC\u0645 \u062F\u0627\u062E\u0644 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A\u0645\u0648\u0646 \u0627\u0648\u0646\u0645 memoize \u0645\u06CC\u06A9\u0646\u0647 \u062F\u06CC\u06AF\u0647"}),` `,(0,a.jsx)(n.p,{children:"\u0645\u0634\u06A9\u0644\u06CC \u06A9\u0647 useMemo \u062D\u0644 \u0645\u06CC\u06A9\u0646\u0647 \u0627\u06CC\u0646\u06A9\u0647 \u0645\u0642\u062F\u0627\u0631 memoize \u0634\u062F\u0647 \u0628\u06CC\u0646 \u0631\u0646\u062F\u0631\u0647\u0627\u06CC \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u062A\u0648 \u062D\u0627\u0641\u0638\u0647 \u0645\u06CC\u0645\u0648\u0646\u0647\u060C \u0648\u0644\u06CC \u0627\u06AF\u0631 \u062A\u0627\u0628\u0639 memoize \u0631\u0648 \u062F\u0627\u062E\u0644 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0635\u062F\u0627 \u06A9\u0646\u06CC\u062F \u0648 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0631\u06CC\u200C\u0631\u0646\u062F\u0631 \u0628\u0634\u0647 \u062A\u0648 \u0631\u0646\u062F\u0631 \u0628\u0639\u062F\u06CC \u06A9\u0644 clousure \u067E\u0627\u06A9 \u0645\u06CC\u0634\u0647 \u0648 cache \u062F\u0648\u0628\u0627\u0631\u0647 \u062E\u0627\u0644\u06CC \u0645\u06CC\u0634\u0647 \u062F\u0631\u0646\u062A\u06CC\u062C\u0647 \u0628\u0627\u06CC\u062F \u0627\u0632 \u0627\u0648\u0644 \u062A\u0645\u0627\u0645 \u0645\u062D\u0627\u0633\u0628\u0627\u062A \u0648 \u0627\u0646\u062C\u0627\u0645 \u0628\u062F\u0647."}),` `,(0,a.jsx)(n.p,{children:"\u0627\u0632 \u06A9\u0627\u0631\u0628\u0631\u062F\u0647\u0627\u06CC useMemo \u0645\u06CC\u0634\u0647 \u0628\u0647 \u0627\u06CC\u0646 \u06F3\u0645\u0648\u0631\u062F \u0627\u0634\u0627\u0631\u0647 \u06A9\u0631\u062F:"}),` `,(0,a.jsxs)(n.ol,{children:[` `,(0,a.jsx)(n.li,{children:"\u0633\u0631\u06CC\u0639\u062A\u0631 \u06A9\u0631\u062F\u0646 \u0633\u0631\u0639\u062A \u0627\u062C\u0631\u0627 \u0634\u062F\u0646 \u062A\u0648\u0627\u0628\u0639 \u067E\u06CC\u0686\u06CC\u062F\u0647"}),` `,(0,a.jsx)(n.li,{children:"\u0630\u062E\u06CC\u0631\u0647 \u06A9\u0631\u062F\u0646 \u0631\u0641\u0631\u0646\u0633 \u0627\u0628\u062C\u06A9\u062A \u0647\u0627 \u0628\u06CC\u0646 \u0631\u0646\u062F\u0631\u0647\u0627\u06CC \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A"}),` `,(0,a.jsx)(n.li,{children:"\u0630\u062E\u06CC\u0631\u0647 \u06A9\u0631\u062F\u0646 \u0631\u0641\u0631\u0646\u0633 \u0627\u0628\u062C\u06A9\u062A \u0647\u0627 \u0628\u0631\u0627\u06CC \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u062F\u0631 \u0647\u0648\u06A9 \u0647\u0627\u06CC \u062F\u06CC\u06AF\u0647!"}),` `]}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," visibleTodos ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useMemo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),` \r \r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"filterTodos"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"todos",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," tab",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` \r \r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"todos",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," tab",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),` \r \r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})}),` `,(0,a.jsx)(n.p,{children:`\u06A9\u062F\u0628\u0627\u0644\u0627 \u0645\u0642\u062F\u0627\u0631 visiblesTodos \u0648 \u0628\u06CC\u0646 \u0631\u0646\u062F\u0631 \u0647\u0627\u06CC \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u062B\u0627\u0628\u062A \u0646\u06AF\u0647 \u0645\u06CC\u062F\u0627\u0631\u0647 \u0648 \u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0627\u0639\u062B \u0645\u06CC\u0634\u0647 \u06A9\u0647 \u062A\u0627\u0628\u0639 filterTodos \u062A\u0648 \u0647\u0631\u0628\u0627\u0631 \u0631\u0646\u062F\u0631 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0627\u0632 \u0627\u0648\u0644 \u0635\u062F\u0627 \u0646\u0634\u0647 \u0648 \u0641\u0642\u0637 \u0648 \u0641\u0642\u0637 \u0632\u0645\u0627\u0646\u06CC \u06A9\u0647 todos \u06CC\u0627 tab \u062A\u063A\u06CC\u06CC\u0631 \u06A9\u0631\u062F\u0646\u062F \u062F\u0648\u0628\u0627\u0631\u0647 \u0627\u0632 \u0627\u0648\u0644 \u0635\u062F\u0627 \u0628\u0634\u0647.\r \u06A9\u0647 \u0645\u0646\u0637\u0642\u06CC\u0647\u060C \u0645\u0627 \u0645\u06CC\u062E\u0648\u0627\u06CC\u0645 \u062F\u0648\u0628\u0627\u0631\u0647 \u0627\u0632 \u0627\u0648\u0644 \u062A\u0627\u0628\u0639 \u0641\u06CC\u0644\u062A\u0631 \u06A9\u0631\u062F\u0646 \u0635\u062F\u0627 \u0632\u062F\u0647 \u0628\u0634\u0647 \u0648 \u0645\u0642\u062F\u0627\u0631\u0634 \u062F\u0627\u062E\u0644 visibleTodos \u0642\u0631\u0627\u0631 \u0628\u06AF\u06CC\u0631\u0647 \u0627\u06AF\u0631 \u0644\u06CC\u0633\u062A todo \u0647\u0627\u06CC\u06CC \u06A9\u0647 \u062F\u0627\u0631\u06CC\u0645 \u0639\u0648\u0636 \u0634\u062F\u0647 \u0628\u0648\u062F.`}),` `,(0,a.jsx)(n.p,{children:"\u0641\u0631\u0636 \u06A9\u0646\u06CC\u062F \u06CC\u0647 \u0644\u06CC\u0633\u062A (\u0627\u0631\u0627\u06CC\u0647) \u0627\u0632 \u06F1\u06F0\u06F0 \u062A\u0627 \u0645\u062D\u0635\u0648\u0644 \u0648 \u0627\u0632 \u0628\u06A9\u200C\u0627\u0646\u062F \u06AF\u0631\u0641\u062A\u06CC\u062F \u0648 \u06CC\u06A9 \u0633\u0631\u06CC \u0641\u06CC\u0644\u062A\u0631 \u062F\u0627\u0631\u06CC\u062F \u06A9\u0647 \u0645\u0634\u062E\u0635 \u0645\u06CC\u06A9\u0646\u0647 \u0627\u0632 \u0627\u06CC\u0646 \u06F1\u06F0\u06F0 \u062A\u0627 \u0645\u062D\u0635\u0648\u0644 \u0686\u0646\u062F\u062A\u0627\u0634 \u0628\u0627\u06CC\u062F \u0628\u0647 \u06A9\u0627\u0631\u0628\u0631 \u0631\u0648 \u0635\u0641\u062D\u0647 \u0646\u0645\u0627\u06CC\u0634 \u062F\u0627\u062F\u0647 \u0628\u0634\u0647."}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:'// products = [{ id: 1, name: "A", price: 100, }, {...}]'}),`\r `,(0,a.jsx)(n.span,{className:"token comment",children:"// priceFilter = 10"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ProductList"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," products",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," priceFilter ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," filteredProducts ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," products",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"filter"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"product"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," product",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"price"})," ",(0,a.jsx)(n.span,{className:"token operator",children:">="}),` priceFilter\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"ul"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"filteredProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"product"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"product",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"id"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Name: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"prodcut",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"name"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Price: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"product",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"price"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,a.jsx)(n.p,{children:`\u062A\u0648 \u0647\u0631\u0628\u0627\u0631 \u0631\u0646\u062F\u0631 \u0634\u062F\u0646 \u067E\u062F\u0631 \u0627\u06CC\u0646 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0639\u0645\u0644\u06CC\u0627\u062A \u0641\u06CC\u0644\u062A\u0631 \u0634\u062F\u0646 \u0631\u0648\u06CC \u06F1\u06F0\u06F0 \u062A\u0627 \u062E\u0648\u0646\u0647 \u0627\u0631\u0627\u06CC\u0647 \u06CC\u06A9\u0628\u0627\u0631 \u0627\u0646\u062C\u0627\u0645 \u0645\u06CC\u0634\u0647.\r \u0645\u06CC\u062A\u0648\u0646\u06CC\u0645 \u0628\u0627 useMemo \u062C\u0644\u0648\u06CC \u0627\u06CC\u0646 \u0627\u062A\u0641\u0627\u0642 \u0648 \u0628\u06AF\u06CC\u0631\u06CC\u0645`}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:'// products = [{ id: 1, name: "A", price: 100, }, {...}]'}),`\r `,(0,a.jsx)(n.span,{className:"token comment",children:"// priceFilter = 10"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ProductList"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," products",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," priceFilter ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," filteredProducts ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useMemo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," products",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"filter"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"product"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," product",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"price"})," ",(0,a.jsx)(n.span,{className:"token operator",children:">="}),` priceFilter\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"ul"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"filteredProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"product"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"product",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"id"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Name: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"prodcut",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"name"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Price: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"product",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"price"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r `]})}),` `,(0,a.jsx)(n.p,{children:`\u0628\u0627 \u0627\u06CC\u0646 \u062A\u063A\u06CC\u06CC\u0631 \u062A\u0648 \u0647\u0631\u0628\u0627\u0631 \u0631\u0646\u062F\u0631 \u0634\u062F\u0646 \u067E\u062F\u0631 \u0627\u06CC\u0646 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A\u060C \u0639\u0645\u0644\u06CC\u0627\u062A filter \u0634\u062F\u0646 \u0627\u0646\u062C\u0627\u0645 \u0646\u0645\u06CC\u0634\u0647 \u0648 \u0641\u0642\u0637 \u0648 \u0641\u0642\u0637 \u06CC\u06A9\u0628\u0627\u0631 (\u062F\u0641\u0639\u0647 \u0627\u0648\u0644\u06CC \u06A9\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0631\u0646\u062F\u0631 \u0645\u06CC\u0634\u0647) \u0627\u06CC\u0646 \u062A\u0627\u0628\u0639 \u0641\u06CC\u0644\u062A\u0631 \u0635\u062F\u0627 \u0632\u062F\u0647 \u0645\u06CC\u0634\u0647. \u0645\u0634\u06A9\u0644\u06CC \u067E\u06CC\u0634 \u0645\u06CC\u0627\u062F \u0627\u06CC\u0646\u06A9\u0647 \u0627\u06AF\u0631 \u0645\u0642\u062F\u0627\u0631 priceFilter \u06CC\u0627 products \u062A\u063A\u06CC\u06CC\u0631 \u06A9\u0646\u0647 \u0628\u0627\u0632 \u0647\u0645 \u0645\u0627 \u0647\u0645\u0648\u0646 \u062F\u06CC\u062A\u0627\u06CC\u06CC \u06A9\u0647 \u0628\u0627\u0631 \u0627\u0648\u0644 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0648 \u0631\u0646\u062F\u0631 \u06A9\u0631\u062F\u06CC\u0645 \u0628\u0627 \u0641\u06CC\u0644\u062A\u0631 \u0647\u0627\u06CC \u0642\u0628\u0644\u06CC \u0648 \u0628\u0647 \u06A9\u0627\u0631\u0628\u0631 \u0646\u0634\u0648\u0646 \u0645\u06CC\u062F\u06CC\u0645 \u0648 \u0628\u0627\u06CC\u062F \u06CC\u0647 \u062C\u0648\u0631\u06CC \u0628\u0647 useMemo \u0628\u06AF\u06CC\u0645 \u0648\u0642\u062A\u06CC products \u06CC\u0627 priceFilter \u062A\u063A\u06CC\u06CC\u0631 \u06A9\u0631\u062F \u0628\u06CC\u0627\u06CC\u062F \u0627\u0632 \u0627\u0648\u0644 \u062A\u0627\u0628\u0639 filter \u0648 \u0635\u062F\u0627 \u0628\u06A9\u0646\u0647.\r \u0648 \u0627\u06CC\u0646\u062C\u0627\u0633\u062A \u06A9\u0647 \u067E\u0627\u0631\u0627\u0645\u062A\u0631 \u062F\u0648\u0645 \u06CC\u0627 \u0647\u0645\u0648\u0646 dependency array \u062A\u0627\u0628\u0639 useMemo \u0628\u0647 \u06A9\u0627\u0631 \u0645\u06CC\u0627\u062F.`}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," filteredProducts ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useMemo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," products",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"filter"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"product"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," product",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"price"})," ",(0,a.jsx)(n.span,{className:"token operator",children:">="}),` priceFilter\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),` \r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"products",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," priceFilter",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// \u{1F448} dependency array"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u0648 \u062E\u0628 \u06A9\u0627\u0631 dependency array \u062F\u0642\u06CC\u0642\u0627 \u0647\u0645\u06CC\u0646\u0647\u060C \u06A9\u0647 \u0628\u0647 useMemo \u0628\u06AF\u0647 \u0627\u06CC\u0646 \u06A9\u062F \u0648\u0627\u0628\u0633\u062A\u0647 \u0647\u0633\u062A\u0634 \u0628\u0647 \u0627\u06CC\u0646 \u0645\u062A\u063A\u06CC\u0631\u0647\u0627 \u0648 \u0627\u06AF\u0631 \u062D\u062A\u06CC \u06CC\u06A9\u06CC \u0627\u0632 \u0645\u0642\u0627\u062F\u06CC\u0631 \u0639\u0648\u0636 \u0634\u062F\u0646 \u0628\u0627\u06CC\u062F \u0627\u0632 \u0627\u0648\u0644 \u062A\u0627\u0628\u0639\u06CC \u06A9\u0647 \u0628\u0647\u062A \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067E\u0627\u0631\u0627\u0645\u062A\u0631 \u0627\u0648\u0644 \u062F\u0627\u062F\u0645 \u0648 \u0635\u062F\u0627 \u06A9\u0646\u06CC."}),` `,(0,a.jsx)(n.p,{children:"\u0648 dependency array \u0628\u0631\u0627\u0633\u0627\u0633 refrence \u0645\u0642\u0627\u062F\u06CC\u0631 dependency array \u062C\u062F\u06CC\u062F \u0648 \u0628\u0627 \u0645\u0642\u0627\u062F\u06CC\u0631 dependency array \u0645\u0631\u062D\u0644\u0647 \u0642\u0628\u0644\u06CC \u0645\u0642\u0627\u06CC\u0633\u0647 \u0645\u06CC\u06A9\u0646\u0647(\u062F\u0642\u06CC\u0642\u062A\u0631 \u0628\u062E\u0648\u0627\u0645 \u0628\u06AF\u0645 \u0627\u0632 Object.is \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC\u06A9\u0646\u0647)"}),` `,(0,a.jsx)(n.p,{children:"\u067E\u0633 \u0645\u0647\u0645\u0647 \u06A9\u0647 \u0631\u0641\u0631\u0646\u0633 products \u0648 priceFilter \u0628\u06CC\u0646 \u0631\u0646\u062F\u0631 \u0647\u0627\u06CC \u0645\u062E\u062A\u0644\u0641 \u062B\u0627\u0628\u062A \u0628\u0645\u0648\u0646\u0647 \u0645\u06AF\u0631\u0646\u0647 \u0627\u06CC\u0646 useMemo \u06A9\u0647 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u06A9\u0631\u062F\u06CC\u0645 \u06A9\u0627\u0645\u0644\u0627 \u0628\u06CC\u0647\u0648\u062F\u0647 \u0628\u0648\u062F\u0647 \u0648 \u0641\u0642\u0637 \u0628\u0627\u0639\u062B \u0634\u062F\u0647 \u0633\u0631\u0639\u062A \u0627\u062C\u0631\u0627\u06CC \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u06CC\u0627\u062F \u067E\u0627\u06CC\u06CC\u0646 (\u0686\u0648\u0646 \u062F\u0627\u0631\u0647 \u062A\u0648 \u0647\u0631 \u0631\u0646\u062F\u0631 \u06CC\u0647 \u06A9\u0627\u0631 \u0627\u0636\u0627\u0641\u0647 \u0645\u06CC\u06A9\u0646\u0647 - \u0646\u062A\u06CC\u062C\u0647 \u0627\u062C\u0631\u0627\u0631\u0648 \u062A\u0648 \u062D\u0627\u0641\u0638\u0647 \u0630\u062E\u06CC\u0631\u0647 \u0645\u06CC\u06A9\u0646\u0647 \u0648\u0644\u06CC \u062F\u0641\u0639\u0647 \u0628\u0639\u062F\u06CC \u0686\u0648\u0646 dependency array \u0645\u0642\u062F\u0627\u0631\u0634 \u0639\u0648\u0636 \u0634\u062F\u0647 \u067E\u0627\u06A9\u0634 \u0645\u06CC\u06A9\u0646\u0647)"}),` `,(0,a.jsx)(n.p,{children:"\u0627\u06CC\u0646 \u0628\u0647 \u0627\u06CC\u0646 \u0645\u0639\u0646\u06CC \u0647\u0633\u062A\u0634 \u06A9\u0647 products \u0648 priceFilter \u06A9\u0647 \u062A\u0648\u06CC \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u067E\u062F\u0631 \u0647\u0633\u062A\u0646\u062F \u0628\u0627\u06CC\u062F memoize \u0628\u0634\u0646."}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ProductsPage"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"products",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"priceFilter",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setPriceFilter",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"fetch"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"/api/products"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," res",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"json"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"setProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsx)(n.span,{className:"token punctuation",children:"<"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"ProductList"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"products"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"products",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"priceFilter"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"priceFilter",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"ProductFilter"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onFilter"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"setPriceFilter",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u0646\u06A9\u062A\u0647: \u0647\u0645\u06CC\u0634\u0647 \u0645\u0642\u062F\u0627\u0631 \u0627\u0633\u062A\u06CC\u062A \u0628\u06CC\u0646 \u0631\u0646\u062F\u0631 \u0647\u0627\u06CC \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u062B\u0627\u0628\u062A \u0645\u06CC\u0645\u0648\u0646\u0647 \u0648 \u0644\u0627\u0632\u0645 \u0646\u06CC\u0633\u062A state \u0648 memoize \u06A9\u0646\u06CC\u0645."}),` `,(0,a.jsx)(n.p,{children:"\u0628\u0627 \u0641\u0631\u0636 \u0627\u06CC\u0646\u06A9\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u067E\u062F\u0631 \u0645\u0634\u0627\u0628\u0647 \u06A9\u062F\u06CC \u06A9\u0647 \u0627\u06CC\u0646\u062C\u0627 \u0646\u0648\u0634\u062A\u0647 \u0634\u062F\u0647 \u0628\u0627\u0634\u0647\u060C \u0646\u06CC\u0627\u0632\u06CC \u0646\u06CC\u0633\u062A \u0631\u0648\u06CC products \u06CC\u0627 priceFilter \u0645\u0627 memoization \u0627\u0646\u062C\u0627\u0645 \u0628\u062F\u06CC\u0645. \u062D\u0627\u0644\u0627 \u0627\u06AF\u0631 \u0648\u0633\u0637 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0645\u0627 \u06CC\u0647 \u0641\u06CC\u0644\u062A\u0631 \u0631\u06CC\u0632\u06CC \u0631\u0648\u06CC \u062F\u06CC\u062A\u0627 \u0627\u0646\u062C\u0627\u0645 \u0628\u062F\u06CC\u0645 \u0648 \u0628\u0639\u062F\u0634 \u0628\u0647 ProductList \u067E\u0627\u0633\u0634 \u0628\u062F\u06CC\u0645 \u0686\u06CC\u061F \u0645\u062B\u0644\u0627 \u0641\u0642\u0637 \u06F1\u06F0 \u062A\u0627 \u0645\u062D\u0635\u0648\u0644 \u0627\u0648\u0644 \u0648 \u0627\u0632 \u0644\u06CC\u0633\u062A\u0645\u0648\u0646 \u0628\u0631\u062F\u0627\u0631\u06CC\u0645 \u0648 \u067E\u0627\u0633 \u0628\u062F\u06CC\u0645 \u0628\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A ProductList"}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"ProductsPage"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"products",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"priceFilter",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setPriceFilter",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"fetch"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"/api/products"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," res",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"json"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"setProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," firstTenProducts ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," products",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"spilit"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"10"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsx)(n.span,{className:"token punctuation",children:"<"})}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"ProductList"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"products"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"firstTenProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"priceFilter"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"priceFilter",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"ProductFilter"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onFilter"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"setPriceFilter",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token tag",children:(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r `]})}),` `,(0,a.jsx)(n.p,{children:"\u0627\u06CC\u0646\u062C\u0627 \u062F\u06CC\u06AF\u0647 \u0627\u0648\u0646 useMemo \u062F\u0627\u062E\u0644 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A ProductList \u062F\u0631\u0633\u062A \u06A9\u0627\u0631 \u0646\u0645\u06CC\u06A9\u0646\u0647 \u0686\u0648\u0646 \u062A\u0648 \u0647\u0631\u0628\u0627\u0631 \u0631\u0646\u062F\u0631 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A ProductsPage \u0631\u0641\u0631\u0646\u0633 \u067E\u0631\u0627\u067E products \u062A\u063A\u06CC\u06CC\u0631 \u0645\u06CC\u06A9\u0646\u0647 (\u0628\u0627 \u0627\u06CC\u0646\u06A9\u0647 \u062F\u0642\u06CC\u0642\u0627 \u0647\u0645\u0648\u0646 \u06F1\u06F0 \u062A\u0627 \u0645\u062D\u0635\u0648\u0644 \u0627\u0648\u0644 \u0644\u06CC\u0633\u062A \u0628\u0631\u0645\u06CC\u062F\u0627\u0631\u0647 \u0648 \u0628\u0647 \u06A9\u0627\u0631\u0628\u0631 \u0646\u0634\u0648\u0646 \u0645\u06CC\u062F\u0647) \u067E\u0633 \u0644\u0627\u0632\u0645\u0647 \u0627\u06CC\u0646 \u0642\u0633\u0645\u062A \u0631\u0648 \u0647\u0645 memoize \u06A9\u0646\u06CC\u0645"}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[" ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," firstTenProducts ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useMemo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," products",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"spilit"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"0"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"10"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"products",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u0645\u06CC\u0628\u06CC\u0646\u06CC\u062F \u0686\u0642\u062F\u0631 \u0633\u0631\u06CC\u0639 \u0634\u0631\u0648\u0639 \u0628\u0647 \u067E\u06CC\u062C\u06CC\u062F\u0647 \u0634\u062F\u0646 \u06A9\u0631\u062F\u0646\u061F \u0648 \u0645\u0627 \u0628\u0627\u06CC\u062F \u0647\u0645\u06CC\u0634\u0647 \u062D\u0648\u0627\u0633\u0645\u0648\u0646 \u0628\u0627\u0634\u0647 \u062A\u0645\u0627\u0645\u06CC \u0645\u0642\u0627\u062F\u06CC\u0631\u06CC \u06A9\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 dependency array \u062F\u0627\u062F\u06CC\u0645 memoize \u0628\u0627\u0634\u0646 \u0648 \u06A9\u0644\u06CC \u06A9\u062F \u0628\u0646\u0648\u06CC\u0633\u06CC\u0645 \u0648 \u06A9\u0644\u06CC \u062D\u0627\u0641\u0638\u0647 \u0645\u0635\u0631\u0641 \u0645\u06CC\u0634\u0647 \u062A\u0627 \u0627\u06CC\u0646 \u0645\u0642\u0627\u062F\u06CC\u0631 \u0647\u0645\u06CC\u0634\u0647 \u062A\u0648 \u062D\u0627\u0641\u0638\u0647 \u062B\u0627\u0628\u062A \u0628\u0645\u0648\u0646\u0646 \u0648 grabage collector \u062D\u0630\u0641\u0634\u0648\u0646 \u0646\u06A9\u0646\u0647"}),` `,(0,a.jsx)(n.p,{children:"\u0645\u0634\u06A9\u0644 memoziation \u062F\u0642\u06CC\u0642\u0627 \u0647\u0645\u06CC\u0646\u0647\u060C \u0628\u0627\u0639\u062B \u0645\u06CC\u0634\u0647 \u067E\u06CC\u062C\u06CC\u062F\u0647 \u0628\u0634\u0647 \u0648 \u06A9\u0646\u062A\u0631\u0644\u0634 \u0633\u062E\u062A \u0645\u06CC\u0634\u0647\u060C \u0628\u0631\u0627\u06CC \u0647\u0645\u06CC\u0646\u0647 \u06A9\u0647 \u0645\u0627 \u0646\u0645\u06CC\u0627\u06CC\u0645 \u062A\u06A9 \u062A\u06A9 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0647\u0627 \u0648 \u062A\u06A9 \u062A\u06A9 \u0645\u062A\u063A\u06CC\u0631\u0647\u0627\u06CC \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0648 memo \u06A9\u0646\u06CC\u0645."}),` `,(0,a.jsx)(n.p,{children:"\u062E\u0628\u0631 \u062E\u0648\u0628 \u0627\u06CC\u0646\u06A9\u0647 \u062A\u06CC\u0645 \u0631\u06CC\u200C\u0627\u06A9\u062A \u06CC\u0627 \u06CC\u0647 \u062A\u06CC\u0645\u06CC \u062F\u0627\u062E\u0644 \u0641\u06CC\u0633\u0628\u0648\u06A9 \u062F\u0627\u0631\u0646 \u06CC\u0647 \u06A9\u0627\u0645\u067E\u0627\u06CC\u0644\u0631 \u0645\u06CC\u0646\u0648\u06CC\u0633\u0646 \u06A9\u0647 \u0627\u062A\u0648\u0645\u0627\u062A\u06CC\u06A9 \u0627\u06CC\u0646 \u06A9\u0627\u0631\u0648 \u0627\u0646\u062C\u0627\u0645 \u0645\u06CC\u062F\u0647 \u0628\u0631\u0627\u06CC \u0645\u0627\u060C \u062E\u0648\u062F\u0634 \u06A9\u062F \u0648 \u0628\u0631\u0631\u0633\u06CC \u0645\u06CC\u06A9\u0646\u0647 \u062E\u0648\u062F\u0634 \u0645\u06CC\u0641\u0647\u0645\u0647 \u06A9\u062C\u0627 \u0628\u0627\u06CC\u062F memo \u0628\u0634\u0647 \u0648 \u0647\u0645\u0631\u0648 \u0628\u0631\u0627\u06CC \u0645\u0627 \u062E\u0648\u062F\u0634 \u0627\u0646\u062C\u0627\u0645 \u0645\u06CC\u062F\u0647. (\u0627\u0645\u0627\u062F\u0647 \u0646\u06CC\u0633\u062A \u0648 \u062C\u0627\u06CC\u06CC \u0646\u06CC\u0633\u062A \u06A9\u0647 \u0628\u0631\u06CC\u062F \u062F\u0627\u0646\u0644\u0648\u062F\u0634 \u06A9\u0646\u06CC\u062F \u0648 \u0628\u0647 \u067E\u0631\u0648\u0698\u0647\u200C\u062A\u0648\u0646 \u0627\u0636\u0627\u0641\u0647\u200C\u0634 \u06A9\u0646\u06CC\u062F)"}),` `,(0,a.jsx)(n.p,{children:"\u0628\u0631\u06AF\u0631\u062F\u06CC\u0645 \u0628\u0647 \u0645\u062B\u0627\u0644 \u0642\u0628\u0644\u06CC \u06A9\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A\u0645\u0648\u0646 \u0648 memo \u06A9\u0631\u062F\u06CC\u0645:"}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// src/Gretting.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Gretting rendered"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Hello, "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"user"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"name"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"memo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token comment",children:"// src/App.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"./Gretting"'}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setCount",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"increment"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"setCount"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r `,(0,a.jsx)(n.span,{className:"token comment",children:"// refrecnce of this object, changes each time this component gets rerendred"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," user ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"user"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"Nima"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"count is: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"increment",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"+1"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Gretting"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"user"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `]})}),` `,(0,a.jsx)(n.p,{children:"\u06AF\u0641\u062A\u06CC\u0645 memozation \u0631\u0648\u06CC \u06A9\u0627\u0645\u067E\u0648\u0648\u0646\u062A greeting \u062F\u06CC\u06AF\u0647 \u06A9\u0627\u0631 \u0646\u0645\u06CC\u06A9\u0646\u0647 \u0686\u0648\u0646 \u0631\u0641\u0631\u0646\u0633 \u0645\u062A\u063A\u06CC\u0631 user \u062A\u0648 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0628\u0627\u0644\u0627\u06CC\u06CC \u062A\u0648 \u0647\u0631 \u0631\u06CC\u200C\u0631\u0646\u062F\u0631 \u0639\u0648\u0636 \u0645\u06CC\u0634\u0647."}),` `,(0,a.jsx)(n.p,{children:"\u067E\u0633 \u0641\u0642\u0637 \u06A9\u0627\u0641\u06CC\u0647 \u0627\u0648\u0646 \u0645\u062A\u063A\u06CC\u0631 user \u0648 \u0628\u06CC\u0627\u06CC\u0645 memoize \u06A9\u0646\u06CC\u0645 \u062A\u0627 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A\u0645\u0648\u0646 \u062F\u0648\u0628\u0627\u0631\u0647 memoize \u0628\u0634\u0647"}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// src/Gretting.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Gretting rendered"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Hello, "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"user"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"name"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"memo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` \r \r `,(0,a.jsx)(n.span,{className:"token comment",children:"// src/App.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," useMemo ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"./Gretting"'}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setCount",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"increment"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"setCount"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," user ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useMemo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"user"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"Nima"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"count is: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"increment",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"+1"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Gretting"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"user"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u{1F389}\u{1F389} \u0647\u0648\u0631\u0627 \u0628\u0627\u0644\u0627\u062E\u0631\u0647 \u0627\u06CC\u0646 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A\u0645\u0648\u0646 memo \u0634\u062F."}),` `,(0,a.jsx)(n.p,{children:`\u0648\u0644\u06CC \u0645\u06CC\u062E\u0648\u0627\u0645 \u06CC\u0647 \u0631\u0627\u0647 \u0628\u0647\u062A\u0631 \u0628\u0647\u062A\u0648\u0646 \u0628\u06AF\u0645 \u06A9\u0647 \u0627\u06CC\u0646 memo \u0628\u062F\u0648\u0646 useMemo \u0627\u0646\u062C\u0627\u0645 \u0628\u0634\u0647!\r \u0627\u06AF\u0631 \u0628\u0647 \u06A9\u062F \u0632\u06CC\u0631 \u062F\u0642\u062A \u06A9\u0646\u06CC\u062F dependency array \u0627\u06CC\u0646 useMemo \u062E\u0627\u0644\u06CC\u0647\u060C \u0627\u06CC\u0646 \u0628\u0647 \u0627\u06CC\u0646 \u0645\u0639\u0646\u06CC\u0647 \u06A9\u0647 \u0647\u06CC\u0686 \u0631\u0641\u0631\u0646\u0633\u06CC \u0628\u0647 \u0647\u06CC\u0686 \u0686\u06CC\u0632\u06CC \u062F\u0627\u062E\u0644 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0645\u0627 \u0646\u062F\u0627\u0631\u0647.`}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," user ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useMemo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"user"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"Nima"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u062E\u0628 \u067E\u0633 \u062F\u0644\u06CC\u0644\u06CC \u0646\u062F\u0627\u0631\u0647 \u0648\u0633\u0637 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u062A\u0639\u0631\u06CC\u0641 \u0628\u0634\u0647 \u0648 \u0645\u0627 \u0645\u06CC\u062A\u0648\u0646\u06CC\u0645 \u0627\u0648\u0646\u0648 \u0628\u06CC\u0627\u0631\u06CC\u0645 \u0628\u06CC\u0631\u0648\u0646 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u062A\u0627 \u0631\u0641\u0631\u0646\u0633 \u0647\u0645\u06CC\u0634\u0647 \u062B\u0627\u0628\u062A \u0628\u0645\u0648\u0646\u0647 \u0648 \u062F\u06CC\u06AF\u0647 \u0646\u06CC\u0627\u0632\u06CC \u0628\u0647 useMemo \u0646\u062F\u0627\u0634\u062A\u0647 \u0628\u0627\u0634\u0647."}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// src/Gretting.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Gretting rendered"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Hello, "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"user"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"name"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"memo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` \r \r `,(0,a.jsx)(n.span,{className:"token comment",children:"// src/App.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"./Gretting"'}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," user ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"user"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"Nima"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(n.span,{className:"token comment",children:"// \u{1F525}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setCount",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"increment"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"setCount"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"count is: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"increment",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"+1"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Gretting"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"user"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `]})}),` `,(0,a.jsx)(n.h3,{id:"usecallback",children:"useCallback"}),` `,(0,a.jsx)(n.p,{children:`\u0647\u0648\u06A9 useCallback \u06CC\u0647 \u062D\u0627\u0644\u062A \u062E\u0627\u0635\u06CC \u0627\u0632 useMemo \u0647\u0633\u062A\u0634\u060C \u062A\u0641\u0627\u0648\u062A\u0634\u0648\u0646 \u0627\u06CC\u0646\u06A9\u0647 useMemo \u062A\u0627\u0628\u0639\u06CC \u06A9\u0647 \u0628\u0647\u0634 \u067E\u0627\u0633 \u0645\u06CC\u062F\u06CC\u062F \u0648 \u0627\u062C\u0631\u0627 \u0645\u06CC\u06A9\u0646\u0647 \u0648 \u0646\u062A\u06CC\u062C\u0647 \u0627\u062C\u0631\u0627 \u0634\u062F\u0646\u0634 \u0648 \u0630\u062E\u06CC\u0631\u0647 \u0645\u06CC\u06A9\u0646\u0647. useCallback \u0631\u0641\u0631\u0646\u0633 \u062A\u0627\u0628\u0639 \u0631\u0648 \u0630\u062E\u06CC\u0631\u0647 \u0645\u06CC\u06A9\u0646\u0647.\r \u0627\u06AF\u0631 \u0628\u062E\u0648\u0627\u06CC\u0645 useCallback \u0648 \u0628\u0627 useMemo \u067E\u06CC\u0627\u062F\u0647 \u06A9\u0646\u06CC\u0645:`}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," handleOnChange ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useMemo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token keyword",children:"function"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"event"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"even",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"target"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"input"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"name",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onChange"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"handleOnChange",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u062A\u0648 \u06A9\u062F \u0628\u0627\u0644\u0627 \u0645\u0642\u062F\u0627\u0631\u06CC \u06A9\u0647 useMemo \u0630\u062E\u06CC\u0631\u0647 \u0645\u06CC\u06A9\u0646\u0647 \u0631\u0641\u0631\u0646\u0633 \u0628\u0647 \u06CC\u06A9 \u062A\u0627\u0628\u0639 \u0647\u0633\u062A\u0634\u060C \u0648 \u062E\u0628 \u0628\u0631\u0627\u06CC \u0627\u06CC\u0646\u06A9\u0647 \u0645\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06CC\u0633 \u0647\u0627 \u0631\u0627\u062D\u062A \u062A\u0631 \u0628\u0627\u0634\u06CC\u0645 \u062A\u06CC\u0645 \u0631\u06CC\u200C\u0627\u06A9\u062A \u0647\u0648\u06A9 useCallback \u0648 \u062F\u0631\u0633\u062A \u06A9\u0631\u062F\u0646 \u06A9\u0647 \u0628\u0647 \u0627\u06CC\u0646 \u0635\u0648\u0631\u062A \u0647\u0633\u062A\u0634:"}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," handleOnChange ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"function"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"event"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"even",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"target"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u062A\u0646\u0647\u0627 \u062A\u0641\u0627\u0648\u062A\u0634\u0648\u0646 \u0628\u0627 useMemo \u0627\u06CC\u0646\u06A9\u0647 \u062A\u0627\u0628\u0639\u06CC \u06A9\u0647 \u0628\u0647\u0634 \u0645\u06CC\u062F\u06CC\u062F \u0648 \u0627\u062C\u0631\u0627 \u0645\u06CC\u06A9\u0646\u0647 \u0648 \u0646\u062A\u06CC\u062C\u0647\u200C\u0627\u06CC \u06A9\u0647 \u0627\u0648\u0646 \u062A\u0627\u0628\u0639 return \u0645\u06CC\u06A9\u0646\u0647 \u0631\u0648 \u0630\u062E\u06CC\u0631\u0647 \u0645\u06CC\u06A9\u0646\u0647\u060C useCallback \u062F\u06CC\u06AF\u0647 \u062A\u0627\u0628\u0639 \u0631\u0648 \u0627\u062C\u0631\u0627 \u0646\u0645\u06CC\u06A9\u0646\u0647 \u0648 \u0628\u0644\u06A9\u0647 \u0631\u0641\u0631\u0646\u0633 \u0647\u0645\u0648\u0646 \u062A\u0627\u0628\u0639 \u0631\u0648 \u0630\u062E\u06CC\u0631\u0647 \u0645\u06CC\u06A9\u0646\u0647."}),` `,(0,a.jsx)(n.p,{children:"\u062F\u0642\u06CC\u0642\u0627 \u0645\u062B\u0644 \u0645\u062A\u063A\u06CC\u0631\u200C\u0647\u0627 \u06A9\u0647 \u0644\u0627\u0632\u0645 \u0628\u0648\u062F \u0631\u0641\u0631\u0646\u0633\u0634\u0648\u0646 \u0628\u06CC\u0646 \u0631\u0646\u062F\u0631 \u0647\u0627 \u062B\u0627\u0628\u062A \u0628\u0627\u0634\u0647 \u062A\u0627 memo \u062F\u0631\u0633\u062A \u06A9\u0627\u0631 \u06A9\u0646\u0647\u060C \u062A\u0648\u0627\u0628\u0639 \u0647\u0645 \u0644\u0627\u0632\u0645 \u0647\u0633\u062A\u0646 \u062A\u0627 memoize \u0628\u0634\u0646 \u062A\u0627 memo \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A\u06CC \u06A9\u0647 \u0628\u0647\u0634\u0648\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067E\u0631\u0627\u067E \u067E\u0627\u0633 \u062F\u0627\u062F\u0647 \u0645\u06CC\u0634\u0646 \u062F\u0631\u0633\u062A \u06A9\u0627\u0631 \u06A9\u0646\u0647."}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// src/Gretting.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Gretting rendered"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"onClick"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Hello, "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"props",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"user"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"name"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"memo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` \r \r `,(0,a.jsx)(n.span,{className:"token comment",children:"// src/App.js"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"react"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Gretting"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"./Gretting"'}),`\r \r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," user ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"user"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:'"Nima"'})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` \r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"props"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setCount",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"increment"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"setCount"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"count ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token comment",children:"// this will cause Gretting component memoization fail"}),`\r `,(0,a.jsx)(n.span,{className:"token comment",children:"// wrap this in a useCallback to fix the issue"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"handleClick"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"Clicked"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"count is: "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"count",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"increment",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"+1"}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Gretting"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"handleClick",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"user"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"user",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u0686\u0647 \u0637\u0648\u0631 \u0645\u06CC\u0634\u0647 \u06A9\u0647 useCallback \u06CC\u0647 \u062D\u0627\u0644\u062A \u062E\u0627\u0635\u06CC \u0627\u0632 useMemo \u0645\u06CC\u0634\u0647\u061F"}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",children:["cb",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," deps"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token function",children:"useMemo"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," cb",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," deps",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u06CC\u0639\u0646\u06CC \u0627\u06AF\u0631 \u0628\u0631\u06CC\u062F \u062F\u0627\u062E\u0644 \u0633\u0648\u0631\u0633 \u06A9\u062F \u06A9\u062A\u0627\u0628\u062E\u0648\u0646\u0647 \u0631\u06CC\u200C\u0627\u06A9\u062A \u06CC\u0647 \u0647\u0645\u0686\u06CC\u0646 \u06A9\u062F\u06CC \u0628\u0627\u06CC\u062F \u062A\u0648 \u06CC\u06A9\u06CC \u0627\u0632 \u0641\u0627\u06CC\u0644 \u0647\u0627 \u0628\u0627\u0634\u0647."}),` `,(0,a.jsx)(n.p,{children:"\u0627\u06AF\u0631 \u06CC\u0627\u062F\u062A\u0648\u0646 \u0628\u0627\u0634\u0647 \u06AF\u0641\u062A\u06CC\u0645 \u06CC\u06A9\u06CC \u0627\u0632 \u06A9\u0627\u0631\u0628\u0631\u062F \u0647\u0627\u06CC useMemo \u0648 useCallback \u0630\u062E\u06CC\u0631\u0647 \u06A9\u0631\u062F\u0646 \u0631\u0641\u0631\u0646\u0633 \u0645\u062A\u063A\u06CC\u0631\u0647\u0627 \u0628\u0631\u0627\u06CC \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u062A\u0648 \u0647\u0648\u06A9 \u0647\u0627\u06CC \u062F\u06CC\u06AF\u0647 \u0647\u0633\u062A\u0634\u060C \u06A9\u0647 \u0645\u062B\u0627\u0644\u0634 \u0628\u0627 useMemo \u0648 \u0628\u0631\u0627\u06CC \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A Products \u0628\u0627\u0644\u0627\u062A\u0631 \u062F\u06CC\u062F\u0645"}),` `,(0,a.jsx)(n.p,{children:`\u0645\u062B\u0627\u0644 \u06A9\u0627\u0631\u0628\u0631\u062F\u06CC \u0627\u0632 useCallback\r \u0641\u0631\u0636 \u06A9\u0646\u06CC\u062F \u062A\u0627\u0628\u0639\u06CC \u0631\u0648 \u062F\u0627\u0631\u06CC\u0645 \u06A9\u0647 \u0645\u06CC\u0631\u0647 \u06CC\u0647 \u062F\u06CC\u062A\u0627\u06CC\u06CC \u0631\u0648 \u0628\u0631\u0627\u06CC \u0645\u0627 \u0627\u0632 \u0628\u06A9 \u0627\u0646\u062F \u0641\u0686 \u0645\u06CC\u06A9\u0646\u0647`}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"fetchProduct"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token function",children:"fetch"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"/api/product/"'})," ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," id",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," res",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"json"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"setProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u0645\u0627 \u0645\u06CC\u062E\u0648\u0627\u06CC\u0645 \u0648\u0642\u062A\u06CC \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A\u0645\u0648\u0646 \u0631\u0646\u062F\u0631 \u0634\u062F \u0628\u0631\u0647 \u0627\u06CC\u0646 \u062A\u0627\u0628\u0639 \u0631\u0648 \u0635\u062F\u0627 \u06A9\u0646\u0647 \u0648 \u062F\u06CC\u062A\u0627 \u0631\u0648 \u0641\u0686 \u06A9\u0646\u0647 \u0648 \u0628\u0647 \u06A9\u0627\u0631\u0628\u0631 \u0646\u0634\u0648\u0646 \u0628\u062F\u0647\u060C \u067E\u0633 \u0645\u06CC\u0627\u06CC\u0645 \u062F\u0627\u062E\u0644 useEffect \u0627\u06CC\u0646 \u062A\u0627\u0628\u0639 \u0631\u0648 \u0635\u062F\u0627 \u0645\u06CC\u06A9\u0646\u06CC\u0645"}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"products",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"fetchProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token function",children:"fetch"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"/api/products/"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," res",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"json"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"setProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"fetchProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"fetchProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u0645\u0634\u06A9\u0644\u06CC \u06A9\u0647 \u067E\u06CC\u0634 \u0645\u06CC\u0627\u062F \u0627\u06CC\u0646\u06A9\u0647 \u0647\u0645\u06CC\u0646\u062C\u0627 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A\u0645\u0648\u0646 \u0645\u06CC\u0648\u0641\u062A\u0647 \u062A\u0648 \u0644\u0648\u067E \u0628\u06CC \u0646\u0647\u0627\u06CC\u062A \u0686\u0648\u0646 \u0647\u0631\u0628\u0627\u0631 \u06A9\u0647 fetchProduct \u0635\u062F\u0627 \u0645\u06CC\u0634\u0647 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A \u0631\u06CC\u200C\u0631\u0646\u062F\u0631 \u0645\u06CC\u0634\u0647 \u0648 \u062A\u0648 \u0631\u0646\u062F\u0631 \u0628\u0639\u062F\u06CC \u0631\u0641\u0631\u0646\u0633 fetchProducts \u0639\u0648\u0636 \u0634\u062F\u0647 \u067E\u0633 useEffect \u062F\u0648\u0628\u0627\u0631\u0647 callback \u06A9\u0647 \u0628\u0647\u0634 \u062F\u0627\u062F\u06CC\u0645 \u0648 \u0635\u062F\u0627 \u0645\u06CC\u06A9\u0646\u0647 \u0648 \u062F\u0648\u0628\u0627\u0631\u0647 fetchProducts \u0635\u062F\u0627 \u0645\u06CC\u0634\u0647 \u0648 ..."}),` `,(0,a.jsx)(n.p,{children:"\u062E\u0628 \u0645\u0645\u06A9\u0646\u0647 \u0628\u06AF\u06CC\u062F \u0631\u0627\u0647 \u062D\u0644 \u0627\u06CC\u0646 \u0645\u0633\u0626\u0644\u0647 \u062E\u06CC\u0644\u06CC \u0633\u0627\u062F\u0633\u062A\u060C \u062A\u0627\u0628\u0639 fetchProducts \u0648 \u0645\u06CC\u0628\u0631\u06CC\u0645 \u062F\u0627\u062E\u0644 useEffect \u0645\u06CC\u0632\u0627\u0631\u06CC\u0645"}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"products",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"fetchProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token function",children:"fetch"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"/api/product/"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," res",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"json"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"setProduct"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"fetchProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u0648 \u06A9\u062F\u0645\u0648\u0646 \u0647\u0645 \u062F\u0631\u0633\u062A \u0647\u0645 \u06A9\u0627\u0631 \u0645\u06CC\u06A9\u0646\u0647\u060C \u0648\u0644\u06CC \u0627\u06AF\u0631 \u0628\u062E\u0648\u0627\u06CC\u0645 \u06CC\u0647 \u062F\u06A9\u0645\u0647\u200C\u0627\u06CC \u0628\u0632\u0627\u0631\u06CC\u0645 \u06A9\u0647 \u0648\u0642\u062A\u06CC \u0631\u0648\u0634 \u06A9\u0644\u06CC\u06A9 \u0645\u06CC\u0634\u0647 \u0628\u0631\u0647 \u062F\u06CC\u062A\u0627\u0631\u0648 \u062F\u0648\u0628\u0627\u0631\u0647 \u0628\u06AF\u06CC\u0631\u0647 \u0686\u06CC\u061F"}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"products",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:"fetchProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token function",children:"fetch"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"/api/products/"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," res",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"json"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"setProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),`\r \r `,(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"fetchProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"fetchProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]}),`\r `,(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"fetchProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r Refetch\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})}),` `,(0,a.jsx)(n.p,{children:"\u0627\u06CC\u0646\u062C\u0627 \u0645\u0627 \u0645\u06CC\u062A\u0648\u0646\u06CC\u0645 \u0628\u0627 useCallback \u0631\u0641\u0631\u0646\u0633 \u062A\u0627\u0628\u0639 fetchProducts \u0648 \u062B\u0627\u0628\u062A \u0646\u06AF\u0647 \u062F\u0627\u0631\u06CC\u0645 \u06A9\u0647 useEffect \u0646\u06CC\u0648\u0641\u062A\u0647 \u062A\u0648 \u0644\u0648\u067E \u0648 \u0631\u0641\u0631\u0646\u0633 fetchProducts \u062B\u0627\u0628\u062A \u0628\u0645\u0648\u0646\u0647."}),` `,(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"products",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," fetchProducts ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useCallback"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token function",children:"fetch"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:'"/api/products/"'}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," res",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"json"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"then"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"res"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token function",children:"setProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),`\r `,(0,a.jsx)(n.span,{className:"token function",children:"fetchProducts"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"fetchProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r `,(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),`\r `,(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]}),`\r `,(0,a.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"fetchProducts",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:`\r Refetch\r `}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:""})]}),`\r `,(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),` `]})}),` `,(0,a.jsx)(n.h3,{id:"\u0646\u06A9\u0627\u062A-\u0645\u0647\u0645-important-notes",children:"\u0646\u06A9\u0627\u062A \u0645\u0647\u0645 ^important-notes"}),` `,(0,a.jsx)(n.p,{children:"\u062A\u0627\u0628\u0639 dispatcher \u06A9\u0647 \u0627\u0632 \u062A\u0648\u0627\u0628\u0639 useState \u0648 useReducer \u06A9\u0647 \u0628\u0631\u0627\u06CC \u0645\u062F\u06CC\u0631\u06CC\u062A \u0627\u0633\u062A\u06CC\uFFFD\uFFFD \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC\u0634\u0646 \u0647\u0645\u06CC\u0634\u0647 \u0631\u0641\u0631\u0646\u0633 \u062B\u0627\u0628\u062A \u062F\u0627\u0631\u0647 \u0648 \u0644\u0627\u0632\u0645 \u0646\u06CC\u0633\u062A meomize \u0628\u0634\u0647."}),` `,(0,a.jsx)(n.pre,{className:"language-js",children:(0,a.jsxs)(n.code,{className:"language-js",children:[(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"state",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setState",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r `,(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"state",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," dispatch",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useReducer"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),`\r \r setState and dispatch are dispatchers and their refrence is always the same `]})}),` `,(0,a.jsx)(n.p,{children:"\u067E\u0633 \u0627\u06AF\u0631 \u062F\u0627\u062E\u0644 useMemo \u06CC\u0627 useCallback \u0627\u0632 \u0627\u0648\u0646\u0627 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u06A9\u0631\u062F\u06CC\u0645 \u0645\u06CC\u062A\u0648\u0646\u06CC\u0645 \u062F\u0627\u062E\u0644 dependnecy array \u0642\u0631\u0627\u0631\u0634\u0648\u0646 \u0646\u062F\u06CC\u0645 (\u0627\u06AF\u0631 \u0647\u0645 \u0642\u0631\u0627\u0631 \u0628\u062F\u06CC\u0645 \u0647\u06CC\u0686 \u0627\u062A\u0641\u0627\u0642\u06CC \u0646\u0645\u06CC\u200C\u0627\u0641\u062A\u0647 \u0648 \u0631\u0641\u062A\u0627\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u062A\u063A\u06CC\u06CC\u0631 \u0646\u0645\u06CC\u06A9\u0646\u0647)"}),` `,(0,a.jsx)(n.p,{children:"\u0627\u06AF\u0631 \u0627\u06CC\u0646 \u062A\u0648\u0627\u0628\u0639 \u0631\u0648 \u062F\u0627\u062E\u0644 \u062A\u0648\u0627\u0628\u0639 \u062F\u06CC\u06AF\u0647 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u06A9\u0631\u062F\u06CC\u0645 \u0644\u0627\u0632\u0645 \u0647\u0633\u062A\u0634 \u06A9\u0647 \u0627\u0648\u0646 \u062A\u0627\u0628\u0639 \u0628\u0647 \u0635\u0648\u0631\u062A \u062C\u062F\u0627 memoize \u0628\u0634\u0647 (\u0627\u06CC\u0646\u0637\u0648\u0631\u06CC \u0628\u0631\u062F\u0627\u0634\u062A \u0646\u0634\u0647 \u06A9\u0647 \u062E\u0628 \u0627\u06AF\u0631 \u062A\u0648 \u06CC\u0647 \u062A\u0627\u0628\u0639\u06CC \u0627\u0648\u0645\u062F\u0645 setState \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u062F\u06CC\u06AF\u0647 \u0627\u0648\u0646 \u062A\u0627\u0628\u0639 \u062E\u0648\u062F \u0628\u0647 \u062E\u0648\u062F memoize \u0645\u06CC\u0634\u0647)"}),` `,(0,a.jsx)(n.p,{children:"\u0631\u0641\u0631\u0646\u0633 state \u0647\u0645\u06CC\u0634\u0647 \u0628\u06CC\u0646 \u0631\u0646\u062F\u0631 \u0647\u0627\u06CC \u0645\u062E\u062A\u0644\u0641 \u062B\u0627\u0628\u062A \u0647\u0633\u062A\u0634 \u0645\u06AF\u0631 \u0627\u06CC\u0646\u06A9\u0647 \u062A\u0627\u0628\u0639 setState \u06CC\u0627 dispatch \u0635\u062F\u0627 \u0628\u0634\u0647 \u0648 \u0627\u0633\u062A\u06CC\u062A \u0628\u0631\u0646\u0627\u0645\u0647 \u0639\u0648\u0636 \u0628\u0634\u0647\u060C \u067E\u0633 \u0646\u06CC\u0627\u0632\u06CC \u0628\u0647 memoize \u06A9\u0631\u062F\u0646 \u0627\u0633\u062A\u06CC\u062A \u0646\u06CC\u0633\u062A."}),` `,(0,a.jsx)(n.h3,{id:"\u0627\u0628\u0632\u0627\u0631-\u0647\u0627\u06CC-\u06A9\u0645\u06A9\u06CC",children:"\u0627\u0628\u0632\u0627\u0631 \u0647\u0627\u06CC \u06A9\u0645\u06A9\u06CC"}),` `,(0,a.jsx)(n.p,{children:`\u06CC\u06A9\u06CC \u0627\u0632 \u0686\u0627\u0644\u0634 \u0647\u0627\u06CC \u0647\u0648\u06A9 \u0647\u0627 \u062F\u0631\u0633\u062A \u067E\u0627\u0633 \u062F\u0627\u062F\u0646 \u0645\u0642\u0627\u062F\u06CC\u0631 dependency array \u0647\u0633\u062A\u0634\u060C \u062A\u06CC\u0645 \u0631\u06CC\u200C\u0627\u06A9\u062A \u06CC\u06A9 \u067E\u0644\u0627\u06AF\u06CC\u0646 \u0628\u0631\u0627\u06CC eslint \u0646\u0648\u0634\u062A\u0646 \u06A9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062A \u0627\u062A\u0648\u0645\u0627\u062A\u06CC\u06A9 \u0645\u0642\u0627\u062F\u06CC\u0631 dependency array \u0645\u06CC\u0632\u0627\u0631\u0647 \u0648 \u06A9\u0627\u0631 \u0648 \u0628\u0631\u0627\u06CC \u0634\u0645\u0627 \u0631\u0627\u062D\u062A \u0645\u06CC\u06A9\u0646\u0647.\r \u0627\u06AF\u0631 \u0627\u0632 create-react-app, razzle, afterjs, remix, next.js, gatsby \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC\u06A9\u0646\u06CC\u062F \u0648 eslint \u0631\u0648\u06CC \u067E\u0631\u0648\u0698\u0647 \u0647\u0627\u06CC \u0634\u0645\u0627 \u06A9\u0627\u0646\u0641\u06CC\u06AF \u0634\u062F\u0647 \u0628\u0627\u0634\u0647 \u0628\u0647 \u0635\u0648\u0631\u062A \u067E\u06CC\u0634 \u0641\u0631\u0636 \u0627\u06CC\u0646 \u067E\u0644\u0627\u06AF\u06CC\u0646 \u0641\u0639\u0627\u0644 \u0647\u0633\u062A\u0634.`}),` `,(0,a.jsx)(n.p,{children:"\u062F\u0631\u0635\u0648\u0631\u062A\u06CC \u06A9\u0647 \u0646\u06CC\u0627\u0632 \u062F\u0627\u0631\u06CC\u062F \u062E\u0648\u062F\u062A\u0648\u0646 \u067E\u0644\u0627\u06AF\u06CC\u0646 \u0648 \u0646\u0635\u0628 \u06A9\u0646\u06CC\u062F \u0648 \u06A9\u0627\u0646\u0641\u06CC\u06AF \u06A9\u0646\u06CC\u062F \u0627\u06CC\u0646 \u0644\u06CC\u0646\u06A9 \u0648 \u062F\u0646\u0628\u0627\u0644 \u06A9\u0646\u06CC\u062F \u0648 \u0637\u0628\u0642 \u062F\u0633\u062A\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u067E\u06A9\u06CC\u062C \u0648 \u0646\u0635\u0628 \u0648 \u06A9\u0627\u0646\u0641\u06CC\u06AF \u06A9\u0646\u06CC\u062F."}),` `,(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/eslint-plugin-react-hooks",children:"https://www.npmjs.com/package/eslint-plugin-react-hooks"})}),` `,(0,a.jsx)(n.h3,{id:"\u062E\u0644\u0627\u0635\u0647",children:"\u062E\u0644\u0627\u0635\u0647"}),` `,(0,a.jsx)(n.p,{children:"\u0627\u0644\u06AF\u0648\u0631\u06CC\u062A\u0645 memoization \u0628\u0631\u0627\u06CC \u0630\u062E\u06CC\u0631\u0647 \u0633\u0627\u0632\u06CC \u0646\u062A\u06CC\u062C\u0647 \u062A\u0648\u0627\u0628\u0639 \u067E\u06CC\u0686\u06CC\u062F\u0647 \u0648 \u0628\u0647\u06CC\u0646\u0647 \u06A9\u0631\u062F\u0646 \u0639\u0645\u0644\u06A9\u0631\u062F \u0628\u0631\u0646\u0627\u0645\u0647\u200C\u0647\u0627\u06CC \u0645\u0627 \u06A9\u0627\u0631\u0628\u0631\u062F \u062F\u0627\u0631\u0647. \u0648\u0642\u062A\u06CC \u0627\u0632 \u0631\u06CC\u200C\u0627\u06A9\u062A \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC\u06A9\u0646\u06CC\u0645 \u06AF\u0627\u0647\u06CC \u0627\u0648\u0642\u0627\u062A \u0628\u0631\u0627\u06CC \u0628\u0647\u0628\u0648\u062F \u0639\u0645\u0644\u06A9\u0631\u062F \u0628\u0631\u0646\u0627\u0645\u0647 \u0648 \u0628\u06CC\u0634\u062A\u0631 \u0645\u0648\u0627\u0642\u0639 \u0628\u0631\u0627\u06CC \u062D\u0644 \u06A9\u0631\u062F\u0646 \u0645\u0634\u06A9\u0644\u0627\u062A \u0631\u0641\u0631\u0646\u0633\u06CC \u0628\u06CC\u0646 \u062A\u0648\u0627\u0628\u0639 \u0648 \u0647\u0648\u06A9 \u0647\u0627\u06CC \u0645\u062E\u062A\u0644\u0641 \u0627\u0632 \u0627\u06CC\u0646 \u0627\u0644\u06AF\u0648\u0631\u06CC\u062A\u0645 \u0627\u0633\u062A\u0641\u0627\u062F\u0647 \u0645\u06CC\u06A9\u0646\u06CC\u0645."}),` `,(0,a.jsx)(n.h3,{id:"\u0631\u0641\u0631\u0646\u0633-\u0647\u0627\u06CC-\u0628\u0647-\u062F\u0631\u062F\u0628\u062E\u0648\u0631",children:"\u0631\u0641\u0631\u0646\u0633 \u0647\u0627\u06CC \u0628\u0647 \u062F\u0631\u062F\u0628\u062E\u0648\u0631"}),` `,(0,a.jsxs)(n.ul,{children:[` `,(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://react.dev/reference/react/useMemo",children:"https://react.dev/reference/react/useMemo"})}),` `,(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://react.dev/reference/react/useCallback",children:"https://react.dev/reference/react/useCallback"})}),` `,(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://react.dev/reference/react/memo",children:"https://react.dev/reference/react/memo"})}),` `,(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://kentcdodds.com/blog/usememo-and-usecallback",children:"https://kentcdodds.com/blog/usememo-and-usecallback"})}),` `]}),` `,(0,a.jsx)(n.p,{children:"\u0646\u0638\u0631 \u0634\u0645\u0627 \u062F\u0631\u0628\u0627\u0631\u0647 memo \u06A9\u0631\u062F\u0646 \u062A\u06A9 \u062A\u06A9 \u06A9\u0627\u0645\u067E\u0648\u0646\u0646\u062A\u200C\u0647\u0627\u06CC \u062F\u0627\u062E\u0644 \u0628\u0631\u0646\u0627\u0645\u0647\u200C\u062A\u0648\u0646 \u0686\u06CC\u0647\u061F \u0628\u0647 \u0646\u0638\u0631\u062A\u0648\u0646 \u0633\u0631\u0639\u062A \u0628\u0631\u0646\u0627\u0645\u0647 \u0648 \u0628\u06CC\u0634\u062A\u0631 \u0645\u06CC\u06A9\u0646\u0647\u061F \u0648 \u0627\u06AF\u0631 \u0633\u0631\u0639\u062A \u0648 \u0628\u06CC\u0634\u062A\u0631 \u0645\u06CC\u06A9\u0646\u0647 \u0627\u0631\u0632\u0634 \u0627\u06CC\u0646 \u0647\u0645\u0647 \u067E\u06CC\u0686\u06CC\u062F\u06AF\u06CC \u0648 \u062F\u0627\u0631\u0647\u061F"}),` `,(0,a.jsx)(n.p,{children:`\u0627\u06AF\u0631 \u0633\u0648\u0627\u0644\u06CC \u062F\u0631\u0628\u0627\u0631\u0647 \u0645\u0642\u0627\u0644\u0647 \u062F\u0627\u0634\u062A\u06CC\u062F \u06CC\u0627 \u0628\u0631\u0627\u06CC \u0633\u0648\u0627\u0644\u0627\u062A \u0628\u0627\u0644\u0627 \u062C\u0648\u0627\u0628\u06CC \u062F\u0627\u0634\u062A\u06CC\u062F \u062A\u0648 \u0642\u0633\u0645\u062A \u0646\u0638\u0631\u0627\u062A \u067E\u0627\u06CC\u06CC\u0646\r \u0647\u0645\u06CC\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0627 \u0645\u0646 \u0628\u0647 \u0627\u0634\u062A\u0631\u0627\u06A9\u0634 \u0628\u0632\u0627\u0631\u06CC\u062F.`}),` `,(0,a.jsx)(n.p,{children:"\u0627\u06AF\u0631 \u062E\u0648\u062F\u062A\u0648\u0646 \u0627\u06CC\u0646 \u0645\u0642\u0627\u0644\u0647 \u0631\u0648 \u062F\u0648\u0633\u062A \u062F\u0627\u0634\u062A\u06CC\u062F \u0628\u0631\u0627\u06CC \u062F\u0648\u0633\u062A\u0627\u0646\u062A\u0648\u0646 \u0647\u0645 \u0628\u0641\u0631\u0633\u062A\u06CC\u062F \u0648 \u0686\u0646\u062F\u062A\u0627 \u{1F525} \u067E\u0627\u06CC\u06CC\u0646 \u0647\u0645\u06CC\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0632\u0627\u0631\u06CC\u062F."})]})}function w(e={}){let{wrapper:n}=e.components||{};return n?(0,a.jsx)(n,Object.assign({},e,{children:(0,a.jsx)(p,e)})):p(e)}var b=w;return f(x);})(); ;return Component;

بلاگ

سلام دنیا!

الگوریتم Memoization