Memoization optimization

Memoization and Re-renders

This skill finds literal functions, objects, and arrays passed as props to custom components. The result is a list of review candidates, not proof of unnecessary re-renders: only the React DevTools Profiler, interaction tests, or equivalent measurements can establish causality and gains.

Memory and patterns

Read the local MEMORY.md and follow ../.shared/SKILL-MEMORY-PROTOCOL.md; use node "<skills-root>/.shared/src/memory-cli.js" append ... for actionable results. The utility validates, renumbers, and retains up to 12 entries.

Before making decisions influenced by existing code, follow ../.shared/PATTERN-LEARNING-PROTOCOL.md and query the repository catalog with node "<skills-root>/.shared/src/pattern-learning/pattern-cli.js" query ...; after confirming a new or refined pattern in the code, consolidate it with node "<skills-root>/.shared/src/pattern-learning/pattern-cli.js" upsert ....

Compatibility

Compatible with React 18/19, Vite 7/8, and Node 22.13+. The scanner accepts .jsx and .tsx, uses the TypeScript parser included in the repository, and does not run the application.

Usage

node "<skill-dir>/scripts/scan-rerenders.js" ./src --format json --dry-run
node "<skill-dir>/scripts/scan-rerenders.js" ./src --output ./validation-results/memoization --format markdown

Output behavior follows the shared CLI contract in ../.shared/README.md.

Interpretation

• The scanner covers custom tags (<Card> and <ui.Card>) and ignores native elements such as <button onClick={() => ...}>.
• Each finding has low severity and the review action; it does not claim that the consumer re-renders or calculate cost.
• consumerMemoized: true means only that a static call to memo(...) was detected in the same file. Exports, props, and the render path still need verification.
• Reconsider static values outside the component before introducing hooks.
• Do not wrap simple expressions with primitive results in useMemo; the hook call and dependency comparison can cost more than the expression.
• In memoized components, hoist default values of non-primitive optional props (arrays, objects, callbacks such as a shared NOOP) to module constants; an inline default breaks the memo() comparison.
• Pass an initializer function to useState for expensive initial values (search indexes, parsing stored JSON); otherwise the computation runs on every render.
• When the next state depends on the current one, use the functional form (setItems(curr => ...)); it keeps callbacks stable with empty dependency arrays and avoids stale closures.

When not to use

• The project uses React Compiler without a measured need for manual memoization (see "React Compiler" below).
• The bottleneck is Context propagation or global state; use the state-management-optimization skill.
• The problem is bundle size or loading; use the bundle-optimization skill.

Recommended process

1. Establish a baseline with the scanner and a reproducible Profiler interaction (production, same machine, same dataset).
2. Prioritize large lists and memoized components that receive unstable props.
3. Correct dependencies and stale closures before optimizing; useCallback and useMemo should wrap only work or identity with observable cost.
4. Consider React.memo when the child component is expensive and its props can remain stable.
5. Use useTransition and useDeferredValue only for non-urgent updates, and keep visual feedback for the user.
6. Repeat the exact scenario: compare commits, median duration, and render p95. Also record results with no gain or inconclusive results.

React Compiler

If the project uses React Compiler, confirm its configuration before adding manual memoization. Fix violations of the Rules of React and keep explicit memoization only when the library must work without the compiler or measurements justify it.

Files

• scripts/scan-rerenders.js: AST/JSX scanner with the shared CLI and Markdown or JSON reports.
• checklists/memoization-checklist.md: diagnosis, implementation, and measurement checklist.
• examples/before and examples/after: equivalent examples; the latter stabilizes only props for memoized custom consumers.

Known limitations

The scanner does not resolve data flow, custom comparators, render props, context, or React Compiler, and it does not measure re-renders. Do not treat the absence of findings as performance evidence; use profiling and functional tests.