agentsclimarketplace

Memoization optimization

Skill dgabreuu/react-skill-pack/skills/memoization-optimization

Skills for refactoring and optimizing React and Vite applications.

Install
npx -y skills add dgabreuu/react-skill-pack --skill memoization-optimization

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 20 days oldThe repository was created 20 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when React component props have unstable identity candidates and memoization decisions need measurement-based guidance.

SKILL.md

4.6 KB, as published. Nobody here has run it

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.

Gives 0 of the 12 instructions most performance cost skills give

Counted across 803 of the 1,058 authors here whose files we hold, read 2026-08-06

  • keep skill files under 500 linesin 82 of 803, across 17 files
  • use imperative form in instructionsin 81 of 803, across 10 files
  • draft assertions while test runs are in progressin 75 of 803, across 9 files
  • create two to three realistic test promptsin 74 of 803, across 8 files
  • write skill descriptions to be pushyin 72 of 803, across 7 files
  • save test cases to evals jsonin 72 of 803, across 6 files
  • ask questions about edge cases and input formatsin 71 of 803, across 6 files
  • save timing data immediately when runs completein 70 of 803, across 5 files
  • include all trigger conditions in the skill descriptionin 69 of 803, across 3 files
  • launch all test runs in a single turnin 69 of 803, across 3 files
  • capture intent before writing a skillin 67 of 803, across 1 file
  • import directly instead of barrel filesin 52 of 803, across 15 files

Said here and by no other author read

  • run the scanner before deciding on fixes
  • prioritize large lists and memoized components with unstable props
  • fix stale closures and dependency arrays before optimizing
  • do not claim findings prove unnecessary re-renders
  • hoist non-primitive optional defaults to module constants
  • do not wrap primitive expressions in useMemo

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.