1"use strict";(self.webpackChunkjavascript_bit=self.webpackChunkjavascript_bit||[]).push([[5922],{2170:function(n,a,s){s.r(a),s.d(a,{Head:function(){return m},default:function(){return g}});var t=s(1151),e=s(7294);function p(n){const a=Object.assign({p:"p",h2:"h2",ol:"ol",li:"li",strong:"strong",span:"span",h3:"h3",ul:"ul",a:"a",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},(0,t.ah)(),n.components);return e.createElement(e.Fragment,null,e.createElement(a.p,null,"You shipped a feature. It works. But the moment your list hits 1,000 items, the app stutters. Typing in the search box causes a visible lag. The initial load takes 4 seconds. Sound familiar?"),"\n",e.createElement(a.p,null,"React is fast by default, but it doesn't stay fast as your app grows. The good news: most performance problems in React follow a small set of patterns, and there's a fixed toolkit for solving them."),"\n",e.createElement(a.p,null,"This guide covers the techniques that actually matter in production â the same ones that come up in senior frontend interviews at companies like Stripe, Airbnb, and Shopify."),"\n",e.createElement(a.h2,null,"Why React Apps Get Slow"),"\n",e.createElement(a.p,null,"Before fixing anything, you need to know what's actually slow. React performance problems usually fall into one of these buckets:"),"\n",e.createElement(a.ol,null,"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Unnecessary re-renders")," â components re-render when their props or state haven't meaningfully changed"),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Expensive renders")," â a component does heavy computation on every render"),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Large bundle size")," â the browser downloads and parses more JavaScript than needed"),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Unoptimized lists")," â rendering thousands of DOM nodes without virtualization"),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Layout thrashing")," â frequent DOM reads and writes that trigger recalculations"),"\n"),"\n",e.createElement(a.p,null,"Let's tackle each one."),"\n",e.createElement(a.h2,null,"1. React.memo: Prevent Unnecessary Re-renders"),"\n",e.createElement(a.p,null,"When a parent component re-renders, React re-renders all of its children by default â even if their props haven't changed. ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">React.memo</code>'}})," tells React to skip re-rendering a component if its props are referentially equal."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// Without memo â re-renders every time the parent re-renders</span>\n<span class="token keyword">function</span> <span class="token function">UserProfile</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> user <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>user<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>user<span class="token punctuation">.</span>email<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token comment">// With memo â only re-renders when `user` actually changes</span>\n<span class="token keyword">const</span> UserProfile <span class="token operator">=</span>
1 React<span class="token punctuation">.</span><span class="token function">memo</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">UserProfile</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> user <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>user<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>user<span class="token punctuation">.</span>email<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>'}}),"\n",e.createElement(a.h3,null,"The Catch: Prop Equality"),"\n",e.createElement(a.p,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">React.memo</code>'}})," does a ",e.createElement(a.strong,null,"shallow comparison")," of props. If you pass a new object, array, or function reference on every render, the memo is useless."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">function</span> <span class="token function">Dashboard</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> data <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// â This creates a new object every render â defeats React.memo</span>\n <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserProfile</span></span> <span class="token attr-name">
1user</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'Alice\'</span><span class="token punctuation">,</span> <span class="token literal-property property">email</span><span class="token operator">:</span> <span class="token string">\'[email protected]\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>\n\n <span class="token comment">// â
Pass the same reference</span>\n <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">\'Alice\'</span><span class="token punctuation">,</span> <span class="token literal-property property">email</span><span class="token operator">:</span> <span class="token string">\'[email protected]\'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserProfile</span></span> <span class="token attr-name">
1user</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>user<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.h3,null,"When to Use React.memo"),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,"The component renders frequently (e.g., it's deep in a tree that updates often)"),"\n",e.createElement(a.li,null,"It receives primitive props or stable object references"),"\n",e.createElement(a.li,null,"Profiling shows it's actually re-rendering unnecessarily"),"\n"),"\n",e.createElement(a.p,null,e.createElement(a.strong,null,"Don't memo everything.")," Memoization has a cost â React has to store the previous props and compare them. If a component is cheap to render, memoizing it can make things slower."),"\n",e.createElement(a.h2,null,"2. useMemo and useCallback: Stabilize Values and Functions"),"\n",e.createElement(a.p,null,"These hooks exist for one reason: to give you stable references between renders."),"\n",e.createElement(a.h3,null,"useMemo â Cache Expensive Computations"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">function</span> <span class="token function">ProductGrid</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> products<span class="token punctuation">,</span> filterText <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// â Filters on every render, even when products hasn\'t changed</span>\n <span class="token keyword">const</span> filtered <span class="token operator">=</span> products<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">p</span> <span class="token operator">=></span>\n p<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>filterText<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// â
Only re-filters when products or filterText changes</span>\n <span class="token keyword">const</span> filtered <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span>\n <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> products<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">p</span> <span class="token operator">=></span>\n p<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>filterText<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n <span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>products<span class="token punctuation">,</span> filterText<span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Grid</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>filtered<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.h3,null,"useCallback â Stable Function References"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">function</span> <span class="token function">Parent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// â New function every render â breaks React.memo on children</span>\n <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">\'Clicked\'</span><span class="token punctuation">,</span> id<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token comment">// â
Same function reference across renders</span>\n <span class="token keyword">const</span> handleClick <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">\'Clicked\'</span><span class="token punctuation">,</span> id<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ExpensiveChild</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.h3,null,"The Golden Rule"),"\n",e.createElement(a.p,null,e.createElement(a.strong,null,"Don't wrap everything in useMemo/useCallback.")," Use them when:"),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,"You're passing the value/function to a memoized child component"),"\n",e.createElement(a.li,null,"The computation is genuinely expensive (filtering/sorting large arrays, complex calculations)"),"\n",e.createElement(a.li,null,"You need a stable reference as a dependency for another hook"),"\n"),"\n",e.createElement(a.p,null,"For simple values and functions that are cheap to create, let React do its thing."),"\n",e.createElement(a.h2,null,"3. Code Splitting with React.lazy and Suspense"),"\n",e.createElement(a.p,null,"Sending one massive JavaScript bundle means the user waits longer before seeing anything. Code splitting lets you load components only when they're needed."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">
1import</span> <span class="token punctuation">{</span> lazy<span class="token punctuation">,</span> Suspense <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// Load the Dashboard only when navigated to</span>\n<span class="token keyword">const</span> Dashboard <span class="token operator">=</span> <span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">\'./Dashboard\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> Settings <span class="token operator">=</span> <span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">\'./Settings\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Suspense</span></span> <span class="token attr-name">fallback</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">LoadingSpinner</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/dashboard<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Dashboard</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/settings<span class="token punctuation">"</span></span> <span class="token attr-name">element</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Settings</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Routes</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Suspense</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.h3,null,"Route-Level vs Component-Level Splitting"),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Route-level")," (most impactful): Split by page/route. Users only download code for the page they're on."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Component-level"),": Split heavy components like charts, editors, or modals that are below the fold."),"\n"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// Split a heavy chart component</span>\n<span class="token keyword">const</span> RevenueChart <span class="token operator">=</span> <span class="token function">lazy</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">
1import</span><span class="token punctuation">(</span><span class="token string">\'./RevenueChart\'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">Report</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> showChart <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Monthly Report</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>showChart <span class="token operator">&&</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Suspense</span></span> <span class="token attr-name">fallback</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Skeleton</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RevenueChart</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Suspense</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.h3,null,"Measure the Impact"),"\n",e.createElement(a.p,null,"Use your bundler's analyzer to see what's in your bundle:"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash"><span class="token comment"># Webpack</span>\nnpx webpack-bundle-analyzer dist/stats.json\n\n<span class="token comment"># Vite</span>\nnpx vite-bundle-visualizer</code></pre></div>'}}),"\n",e.createElement(a.p,null,"Look for chunks over 50KB that could be lazy-loaded."),"\n",e.createElement(a.h2,null,"4. List Virtualization: Render Only What's Visible"),"\n",e.createElement(a.p,null,"Rendering 10,000 rows in the DOM will crash performance â no amount of memoization fixes that. Virtualization renders only the items currently visible in the viewport."),"\n",e.createElement(a.h3,null,"Using react-window"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="bash"><pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> react-window</code></pre></div>'}}),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">
1import</span> <span class="token punctuation">{</span> FixedSizeList <span class="token keyword">as</span> List <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react-window\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">BigList</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> items <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token function-variable function">Row</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> index<span class="token punctuation">,</span> style <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>items<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token plain-text"> â </span><span class="token punctuation">{</span>items<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>email<span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">List</span></span>\n <span class="token attr-name">height</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">600</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">itemCount</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>items<span class="token punctuation">.</span>length<span class="token punctuation">}</span></span>\n <span class="token attr-name">itemSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span>\n <span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>Row<span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">List</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.p,null,"This renders 10,000 items as smoothly as 20. Only ~12 rows exist in the DOM at any time."),"\n",e.createElement(a.h3,null,"When to Virtualize"),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,"Lists with 100+ items where each item has similar height"),"\n",e.createElement(a.li,null,"Tables with large datasets"),"\n",e.createElement(a.li,null,"Chat/messaging interfaces with long histories"),"\n"),"\n",e.createElement(a.p,null,"For shorter lists (under 100 items), regular rendering with proper keys is fine."),"\n",e.createElement(a.h2,null,"5. The React Profiler: Measure Before You Optimize"),"\n",e.createElement(a.p,null,"Guessing what's slow is how you waste time memoizing components that don't need it. The React Profiler shows you exactly which components are slow and why."),"\n",e.createElement(a.h3,null,"Using the Profiler Tab in React DevTools"),"\n",e.createElement(a.ol,null,"\n",e.createElement(a.li,null,"Install the ",e.createElement(a.a,{href:"https://react.dev/learn/react-developer-tools"},"React Developer Tools")," browser extension"),"\n",e.createElement(a.li,null,"Open DevTools â Profiler tab"),"\n",e.createElement(a.li,null,"Click the record button"),"\n",e.createElement(a.li,null,"Interact with your app (type in a search box, scroll, click)"),"\n",e.createElement(a.li,null,"Stop recording"),"\n"),"\n",e.createElement(a.p,null,"You'll see a flame chart showing render times. Look for:"),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Wi
1de bars")," â components that take long to render"),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Repeated bars")," â components rendering more than expected"),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Why did this render?")," â click a component to see what triggered the re-render"),"\n"),"\n",e.createElement(a.h3,null,"Programmatic Profiling"),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Profiler <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">onRenderCallback</span><span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> phase<span class="token punctuation">,</span> actualDuration</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>phase<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> took </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>actualDuration<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">ms</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Profiler</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dashboard<span class="token punctuation">"</span></span> <span class="token attr-name">onRender</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onRenderCallback<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Dashboard</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Profiler</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.p,null,"This is useful for tracking render performance in production with real user data."),"\n",e.createElement(a.h2,null,"6. State Colocation: Keep State Where It Belongs"),"\n",e.createElement(a.p,null,"One of the most common performance mistakes is lifting state too high. When state lives at the top of the tree, every update re-renders everything below it."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token comment">// â Search state in the parent re-renders the entire list</span>\n<span class="token keyword">function</span> <span class="token function">ProductPage</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> products <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>search<span class="token punctuation">,</span> setSearch<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">\'\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>selectedCategory<span class="token punctuation">,</span> setSelectedCategory<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">\'all\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SearchBar</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>search<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>setSearch<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CategoryFilter</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>selectedCategory<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>setSelectedCategory<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ProductList</span></span> <span class="token attr-name">products</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">filterProducts</span><span class="token punctuation">(</span>products<span class="token punctuation">,</span> search<span class="token punctuation">,</span> selectedCategory<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Recommendations</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* Re-renders when search changes, even though it doesn\'t use search */</span><span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Footer</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* Same */</span><span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token comment">// â
Colocate search state in a sub-tree</span>\n<span class="token keyword">function</span> <span class="token function">ProductPage</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> products <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ProductSearchSection</span></span> <span class="token attr-name">products</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>products<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Recommendations</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Footer</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">function</span> <span class="token function">ProductSearchSection</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> products <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>search<span class="token punctuation">,</span> setSearch<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">\'\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>selectedCategory<span class="token punctuation">,</span> setSelectedCategory<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">\'all\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SearchBar</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>search<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>setSearch<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CategoryFilter</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>selectedCategory<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>setSelectedCategory<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ProductList</span></span> <span class="token attr-name">products</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">filterProducts</span><span class="token punctuation">(</span>products<span class="token punctuation">,</span> search<span class="token punctuation">,</span> selectedCategory<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.p,null,"Now typing in the search bar only re-renders ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">ProductSearchSection</code>'}}),", not the entire page."),"\n",e.createElement(a.h2,null,"7. Debouncing and Throttling User Input"),"\n",e.createElement(a.p,null,"Search inputs and scroll handlers that trigger state updates on every keystroke or pixel will hammer your re-render cycle."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">
1import</span> <span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">useDebounce</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> delay</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>debounced<span class="token punctuation">,</span> setDebounced<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> timer <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setDebounced</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>value<span class="token punctuation">,</span> delay<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> debounced<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">function</span> <span class="token function">SearchWithResults</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> allItems <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>query<span class="token punctuation">,</span> setQuery<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">\'\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> debouncedQuery <span class="token operator">=</span> <span class="token function">useDebounce</span><span class="token punctuation">(</span>query<span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// This expensive filter only runs 300ms after the user stops typing</span>\n <span class="token keyword">const</span> results <span class="token operator">=</span> <span class="token function">useMemo</span><span class="token punctuation">(</span>\n <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> allItems<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span>\n item<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>debouncedQuery<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n <span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>allItems<span class="token punctuation">,</span> debouncedQuery<span class="token punctuation">]</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span>
1\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>query<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setQuery</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Search...<span class="token punctuation">"</span></span>\n <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ResultList</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>results<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.h2,null,"8. useTransition for Non-Urgent Updates"),"\n",e.createElement(a.p,null,"React 18 introduced ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useTransition</code>'}})," to let you mark certain state updates as low priority. This keeps the UI responsive even when a heavy update is running."),"\n",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<div class="gatsby-highlight" data-language="jsx"><pre class="language-jsx"><code class="language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useTransition <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">SearchableList</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> items <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>query<span class="token punctuation">,</span> setQuery<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">\'\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>isPending<span class="token punctuation">,</span> startTransition<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useTransition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>filtered<span class="token punctuation">,</span> setFiltered<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span>items<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">function</span> <span class="token function">handleChange</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> value <span class="token operator">=</span>
1 e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>\n\n <span class="token comment">// Urgent: update the input immediately so typing feels responsive</span>\n <span class="token function">setQuery</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// Non-urgent: filter can take its time</span>\n <span class="token function">startTransition</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setFiltered</span><span class="token punctuation">(</span>items<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span>\n item<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>value<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>query<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleChange<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token punctuation">{</span>isPending <span class="token operator">&&</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token plain-text">Filtering...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">List</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>filtered<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">\n </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre></div>'}}),"\n",e.createElement(a.p,null,"The input stays responsive while React processes the list filtering in the background."),"\n",e.createElement(a.h2,null,"Quick Reference: Which Technique When?"),"\n",e.createElement(a.table,null,e.createElement(a.thead,null,e.createElement(a.tr,null,e.createElement(a.th,null,"Problem"),e.createElement(a.th,null,"Technique"),e.createElement(a.th,null,"Effort"))),e.createElement(a.tbody,null,e.createElement(a.tr,null,e.createElement(a.td,null,"Child re-renders unnecessarily"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">React.memo</code>'}})," + ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useCallback</code>'}})),e.createElement(a.td,null,"Low")),e.createElement(a.tr,null,e.createElement(a.td,null,"Expensive computation on render"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useMemo</code>'}})),e.createElement(a.td,null,"Low")),e.createElement(a.tr,null,e.createElement(a.td,null,"Slow initial load (large bundle)"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">React.lazy</code>'}}
1)," code splitting"),e.createElement(a.td,null,"Medium")),e.createElement(a.tr,null,e.createElement(a.td,null,"Long list lagging"),e.createElement(a.td,null,"Virtualization (",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">react-window</code>'}}),")"),e.createElement(a.td,null,"Medium")),e.createElement(a.tr,null,e.createElement(a.td,null,"Don't know what's slow"),e.createElement(a.td,null,"React Profiler"),e.createElement(a.td,null,"Low")),e.createElement(a.tr,null,e.createElement(a.td,null,"Too much re-rendering on update"),e.createElement(a.td,null,"State colocation"),e.createElement(a.td,null,"Low")),e.createElement(a.tr,null,e.createElement(a.td,null,"Input lag on search/filter"),e.createElement(a.td,null,"Debounce + ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useMemo</code>'}})),e.createElement(a.td,null,"Low")),e.createElement(a.tr,null,e.createElement(a.td,null,"UI freezes during heavy update"),e.createElement(a.td,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useTransition</code>'}})),e.createElement(a.td,null,"Low")))),"\n",e.createElement(a.h2,null,"Interview Cheatsheet"),"\n",e.createElement(a.p,null,'If you\'re asked "How would you optimize a slow React component?" in an interview, walk through this checklist:'),"\n",e.createElement(a.ol,null,"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Profile first")," â Don't guess. Use React DevTools Profiler to find the actual bottleneck."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Check re-renders")," â Are components re-rendering when they shouldn't? Use ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">React.memo</code>'}})," for expensive leaf components."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Stabilize references")," â Are you creating new objects/functions on every render? Wrap them in ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useMemo</code>'}}),"/",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useCallback</code>'}}),"."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Reduce the DOM")," â Large lists? Virtualize them."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Split the bundle")," â Lazy-load routes and heavy components."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Colocate state")," â Move state down to prevent unnecessary re-renders."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Debounce input")," â Don't filter/search on every keystroke."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Consider concurrent features")," â ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useTransition</code>'}})," for non-urgent updates."),"\n"),"\n",e.createElement(a.h2,null,"Summary"),"\n",e.createElement(a.ul,null,"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Profile before optimizing.")," The React Profiler tells you what's actually slow."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Memoization isn't free.")," Use ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">React.memo</code>'}}),", ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useMemo</code>'}}),", and ",e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useCallback</code>'}})," only when profiling shows they help."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Code splitting gives the biggest bang for buck")," for initial load performance."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"Virtualization is non-negotiable")," for large lists."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,"State colocation")," is the simplest fix that's often overlooked."),"\n",e.createElement(a.li,null,e.createElement(a.strong,null,e.createElement(a.span,{dangerouslySetInnerHTML:{__html:'<code class="language-text">useTransition</code>'}}))," is React 18's answer to keeping the UI responsive during heavy updates."),"\n"),"\n",e.createElement(a.p,null,"The best optimization strategy is to measure, fix the biggest bottleneck, then measure again. Don't optimize blindly â every optimization adds complexity, and you want the maximum performance gain for the minimum code complexity."))}var o=function(n){void 0===n&&(n={});const{wrapper:a}=Object.assign({},(0,t.ah)(),n.components);return a?e.createElement(a,n,e.createElement(p,n)):p(n)}
1,c=s(1883),l=s(2198),u=s(9357),i=s(4992),r=s(6376);const k=n=>{var a;let{data:{previous:s,next:t,site:p,mdx:o},location:u,pageContext:k,children:m}=n;const g=(null===(a=p.siteMetadata)||void 0===a?void 0:a.title)||"Title",{seriesPosts:d}=k||{},h=o.fields;return e.createElement(l.Z,{location:u,title:g},e.createElement("article",{className:"blog-post",itemScope:!0,itemType:"http://schema.org/Article"},e.createElement("header",null,e.createElement("h1",{itemProp:"headline"},o.frontmatter.title),e.createElement("p",null,o.frontmatter.category&&e.createElement("span",{className:"category-pill"},o.frontmatter.category),o.frontmatter.date,(null==h?void 0:h.wordCount)>0&&e.createElement("span",{style:{marginLeft:"0.75rem",color:"inherit",opacity:.6}},"· ",Math.max(1,Math.round(h.wordCount/200))," min read"))),o.frontmatter.series&&d&&d.length>0&&e.createElement(r.Z,{seriesSlug:o.frontmatter.series,currentSlug:o.fields.slug,seriesPosts:d}),e.createElement("section",{itemProp:"articleBody"},m),e.createElement(i.Z),e.createElement("hr"),e.createElement("footer")),e.createElement("nav",{className:"blog-post-nav"},e.createElement("ul",{style:{display:"flex",flexWrap:"wrap",justifyContent:"space-between",listStyle:"none",padding:0}},e.createElement("li",null,s&&e.createElement(c.Link,{to:s.fields.slug,rel:"prev"},"â ",s.frontmatter.title)),e.createElement("li",null,t&&e.createElement(c.Link,{to:t.fields.slug,rel:"next"},t.frontmatter.title," â")))))},m=n=>{let{data:{mdx:a}}=n;return e.createElement(u.Z,{title:a.frontmatter.title,description:a.frontmatter.description||a.excerpt})};function g(n){return e.createElement(k,n,e.createElement(o,n))}},6376:function(n,a,s){var t=s(5785),e=s(7294),p=s(1883);const o={"browser-concurrency":{title:"Browser Concurrency",description:"A practical guide to sharing data and coordinating work across browser threads â tabs, workers, and shared memory."},"frontend-system-design":{title:"Frontend System Design Interview Prep",description:"A complete guide to acing frontend system design interviews â from the RADIO framework to real-world component designs asked at FAANG."}};a.Z=n=>{let{seriesSlug:a,currentSlug:s,seriesPosts:c}=n;if(!a||!c||0===c.length)return null;const l=o[a]||{title:a,description:""},u=(0,t.Z)(c).sort(((n,a)=>n.seriesOrder-a.seriesOrder)),i=u.findIndex((n=>n.slug===s)),r=i>=0?"Part "+(i+1)+" of "+u.length:u.length+" articles";return e.createElement("nav",{"aria-label":l.title+" series navigation",style:{borderLeft:"4px solid #4f46e5",background:"#f0f4ff",borderRadius:"0 6px 6px 0",padding:"1rem 1.25rem",marginBottom:"2rem",fontFamily:"var(--fontFamily-sans, system-ui, sans-serif)"}},e.createElement("p",{style:{margin:"0 0 0.75rem 0",fontSize:"0.95rem",fontWeight:700,color:"#1e1b4b",letterSpacing:"-0.01em"}},"ð ",l.title," â ",r),e.createElement("ol",{style:{listStyle:"none",padding:0,margin:"0 0 0.75rem 0"}},u.map(((n,a)=>{const t=n.slug===s,o=a<i,c={marginBottom:"0.35rem",fontSize:"0.9rem",display:"flex",alignItems:"baseline",gap:"0.4rem"},l=t?"â":o?"â":"  ",u={flexShrink:0,width:"1.2em",color:t?"#4f46e5":o?"#6b7280":"#9ca3af",fontWeight:t?700:400};return t?e.createElement("li",{key:n.slug,style:c,"aria-current":"page"},e.createElement("span",{style:u},l),e.createElement("strong",{style:{color:"#1e1b4b"}},a+1,". ",n.title)):e.createElement("li",{key:n.slug,style:c},e.createElement("span",{style:u},l),e.createElement(p.Link,{to:n.slug,style:{color:o?"#6b7280":"#4f46e5",textDecoration:"none"}},a+1,". ",n.title))}))),e.createElement(p.Link,{to:"/series/"+a+"/",style:{fontSize:"0.85rem",color:"#4f46e5",textDecoration:"none",fontWeight:600}},"View all articles in this series â"))}},4992:function(n,a,s){var t=s(7294);a.Z=()=>{const{0:n,1:a}=(0,t.useState)(!1);(0,t.useEffect)((()=>{sessionStorage.getItem("hideKofi")&&a(!0)}),[]);return n?null:t.createElement(t.Fragment,null,t.createElement("a",{target:"_blank",rel:"noreferrer",href:"https://ko-fi.com/javascriptbit"},"Donate"),t.createElement("button",{style:{marginLeft:"1em"},onClick:n=>{n.preventDefault(),a(!0),sessionStorage.setItem("hideKofi","true")}},"Hide for now"))}},2198:function(n,a,s){s.d(a,{Z:function(){return l}});var t=s(7294),e=s(1883),p=s(1151);var o=()=>{const[n,a]=t.useState(null);t.useEffect((()=>{const n=document.documentElement.getAttribute("data-theme")||"light";a(n)}),[]);return null===n?t.createElement("span",{style:{width:32,display:"inline-block"}}):t.createElement("button",{onClick:()=>{const s="dark"===n?"light":"dark";a(s),document.documentElement.setAttribute("data-theme",s);try{localStorage.setItem("jsbit-theme",s)}catch(t){}},"aria-label":"dark"===n?"Switch to light mode":"Switch to dark mode",title:"dark"===n?"Light mode":"Dark mode",style:{background:"none",border:"none",cursor:"pointer",fontSize:"1.2rem",padding:"4px 8px",borderRadius:"6px",lineHeight:1,color:"inherit",opacity:.75,transition:"opacity 0.15s ease"},onMouseEnter:n=>n.currentTarget.style.opacity="1",onMouseLeave:n=>n.currentTarget.style.opacity="0.75"},"dark"===n?"âï¸":"ð")};const c={FullscreenContainer:function(n){let{child:a}=n;const{0:s,1:e}=(0,t.useState)(!1),p=(0,t.useCallback)((n=>{"Enter"===n.key?e(!s):"Escape"===n.key&&e(!1)}),[s]);return t.createElement("div",{className:"fullscreen "+(s?"active":"")},t.createElement("div",{className:"buttons-container"},t.createElement("span",{tabIndex:-1,role:"button",onClick:()=>e(!s),onKeyUp:p},t.createElement("img",{src:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAw
1MDAwMCIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTUuMDAwMDAwLCAtMjU3LjAwMDAwMCkiPjxnIGlkPSJmdWxsc2NyZWVuIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTUuMDAwMDAwLCAyNTcuMDAwMDAwKSI+PHBhdGggZD0iTTIsOSBMMCw5IEwwLDE0IEw1LDE0IEw1LDEyIEwyLDEyIEwyLDkgTDIsOSBaIE0wLDUgTDIsNSBMMiwyIEw1LDIgTDUsMCBMMCwwIEwwLDUgTDAsNSBaIE0xMiwxMiBMOSwxMiBMOSwxNCBMMTQsMTQgTDE0LDkgTDEyLDkgTDEyLDEyIEwxMiwxMiBaIE05LDAgTDksMiBMMTIsMiBMMTIsNSBMMTQsNSBMMTQsMCBMOSwwIEw5LDAgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+",alt:"Toggle Full Screen",color:"currentColor"}))),a)}};var l=n=>{let{location:a,title:s,children:l}=n;const u="/"===a.pathname,[i,r]=t.useState(2024);let k;return t.useEffect((()=>{r((new Date).getFullYear())}),[]),k=u?t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},t.createElement("h1",{className:"main-heading"},t.createElement(e.Link,{to:"/"},s)),t.createElement(o,null)):t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},t.createElement(e.Link,{className:"header-link-home",to:"/"},s),t.createElement(o,null)),t.createElement(p.Zo,{components:c},t.createElement("div",{className:"global-wrapper","data-is-root-path":u},t.createElement("header",{className:"global-header"},k),t.createElement("main",null,l),t.createElement("footer",null,"© ",i,", Built with"," ",t.createElement("a",{href:"https://www.gatsbyjs.com"},"Gatsby"))))}},9357:function(n,a,s){var t=s(7294),e=s(1883);a.Z=n=>{var a,s,p;let{description:o,title:c,children:l}=n;const{site:u}=(0,e.useStaticQuery)("2841359383"),i=o||u.siteMetadata.description,r=null===(a=u.siteMetadata)||void 0===a?void 0:a.title;return t.createElement(t.Fragment,null,t.createElement("title",null,r?c+" | "+r:c),t.createElement("meta",{name:"description",content:i}),t.createElement("meta",{property:"og:title",content:c}),t.createElement("meta",{property:"og:description",content:i}),t.createElement("meta",{property:"og:type",content:"website"}),t.createElement("meta",{name:"twitter:card",content:"summary"}),t.createElement("meta",{name:"twitter:creator",content:(null===(s=u.siteMetadata)||void 0===s||null===(p=s.social)||void 0===p?void 0:p.twitter)||""}),t.createElement("meta",{name:"twitter:title",content:c}),t.createElement("meta",{name:"twitter:description",content:i}),l)}},1151:function(n,a,s){s.d(a,{Zo:function(){return c},ah:function(){return p}});var t=s(7294);const e=t.createContext({});function p(n){const a=t.useContext(e);return t.useMemo((()=>"function"==typeof n?n(a):{...a,...n}),[a,n])}const o={};function c({components:n,children:a,disableParentContext:s}){let c;return c=s?"function"==typeof n?n({}):n||o:p(n),t.createElement(e.Provider,{value:c},a)}}}]); 2//# sourceMappingURL=component---src-templates-blog-post-js-content-file-path-opt-build-repo-content-blog-react-performance-optimization-techniques-index-md-05a4c40c5955a5a43407.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.