React useMemo and useCallback performance patterns

<p>My React app re-renders excessively. I want practical guidance on when useMemo and useCallback actually help vs when they are premature optimization that adds overhead without benefit.</p>

<p>Strategic memoization patterns:</p> <div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useMemo</span><span class="p">,</span><span class="w"> </span><span class="nx">useCallback</span><span class="p">,</span><span class="w"> </span><span class="nx">memo</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'react'</span><span class="p">;</span> <span class="c1">// useCallback: stabilize function refs for memoized children</span> <span class="kd">function</span><span class="w"> </span><span class="nx">SearchPage</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// Without useCallback: new function every render -&gt; SearchResults re-renders</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">handleSearch</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useCallback</span><span class="p">((</span><span class="nx">q</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">setQuery</span><span class="p">(</span><span class="nx">q</span><span class="p">);</span> <span class="w"> </span><span class="nx">analytics</span><span class="p">.</span><span class="nx">track</span><span class="p">(</span><span class="s1">'search'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">query</span><span class="o">:</span><span class="w"> </span><span class="kt">q</span><span class="w"> </span><span class="p">});</span> <span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[]);</span><span class="w"> </span><span class="c1">// Stable: function never needs to change</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">SearchResults</span><span class="w"> </span><span class="nx">onSearch</span><span class="o">=</span><span class="p">{</span><span class="nx">handleSearch</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">;</span><span class="w"> </span><span class="c1">// memo-wrapped child</span> <span class="p">}</span> <span class="kd">const</span><span class="w"> </span><span class="nx">SearchResults</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">memo</span><span class="p">(({</span><span class="w"> </span><span class="nx">traces</span><span class="p">,</span><span class="w"> </span><span class="nx">onSearch</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Props</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">traces</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">t</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">TraceCard</span><span class="w"> </span><span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">t</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="w"> </span><span class="nx">trace</span><span class="o">=</span><span class="p">{</span><span class="nx">t</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">)}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span> <span class="p">});</span> <span class="c1">// useMemo: expensive computation or stable object for useEffect</span> <span class="kd">function</span><span class="w"> </span><span class="nx">TraceList</span><span class="p">({</span><span class="w"> </span><span class="nx">traces</span><span class="p">,</span><span class="w"> </span><span class="nx">filters</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="nx">Props</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// Filter+sort is expensive -- only recompute when inputs change:</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">sorted</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useMemo</span><span class="p">(</span> <span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">traces</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">t</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">t</span><span class="p">.</span><span class="nx">status</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="nx">filters</span><span class="p">.</span><span class="nx">status</span><span class="p">)</span> <span class="w"> </span><span class="p">.</span><span class="nx">sort</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span><span class="w"> </span><span class="nx">b</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">b</span><span class="p">.</span><span class="nx">trust_score</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">a</span><span class="p">.</span><span class="nx">trust_score</span><span class="p">),</span> <span class="w"> </span><span class="p">[</span><span class="nx">traces</span><span class="p">,</span><span class="w"> </span><span class="nx">filters</span><span class="p">.</span><span class="nx">status</span><span class="p">]</span> <span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;&gt;</span><span class="p">{</span><span class="nx">sorted</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">t</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">TraceCard</span><span class="w"> </span><span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">t</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="w"> </span><span class="nx">trace</span><span class="o">=</span><span class="p">{</span><span class="nx">t</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">)}</span><span class="o">&lt;</span><span class="err">/&gt;;</span> <span class="p">}</span> </code></pre></div> <p>When NOT to memoize: - Simple computations (string concatenation, boolean check) - Values that change on every render anyway - Components without expensive children</p> <p>Key points: - Profile first with React DevTools Profiler -- memoization has overhead - memo + useCallback must be used together for callbacks to be effective - useMemo for computations taking more than 1ms or for stable object references - Objects/arrays in deps cause infinite re-renders -- stabilize with useMemo first</p>