agentsclimarketplace

State management optimization

Skill dgabreuu/react-skill-pack/skills/state-management-optimization

Skills for refactoring and optimizing React and Vite applications.

Install
npx -y skills add dgabreuu/react-skill-pack --skill state-management-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 Context shows broad update propagation signals and native React APIs may reduce unnecessary notifications.

SKILL.md

4.5 KB, as published. Nobody here has run it

State, Context, and Update Propagation

Context makes a value available to the tree but does not automatically select fields: when the observed value changes identity, consumers may be notified. This skill identifies investigation signals; no finding proves a re-render or gain. Confirm causality in the React DevTools Profiler with a fixed scenario.

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+. Analysis is static and covers .js, .jsx, .ts, and .tsx:

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

The report carries an advisory action; output behavior follows the shared CLI contract in ../.shared/README.md.

When not to use

  • The issue is unstable props into memoized children, not Context; use the memoization-optimization skill.
  • The state is local to a single component; prefer the component-refactoring skill.

Recommended process

  1. Measure commits, median and p95 duration, and affected consumers before changing the architecture.
  2. Split Context by domain or update rate only when the data genuinely has different lifecycles.
  3. Split state and dispatch when many consumers only dispatch actions. This reduces notifications for the dispatch context, but it does not automatically turn the state context into a field selector.
  4. Use useMemo or useCallback to stabilize the value only when dependencies and cost justify it; React setters already have stable identity.
  5. For fine-grained selection, use use-context-selector only with createContext imported from that package and with the dependency declared. The library is optional; do not install it automatically.
  6. Reconsider whether state needs to be global before adopting Zustand, Jotai, Redux Toolkit, or another store.
  7. Repeat the same tests, flow, and profiling. If only structure or readability changes, record “no measurable gain.”

useTransition

startTransition receives a function with no arguments. Capture the event value first and pass startTransition(() => setQuery(nextValue)). Do not pass the event directly. Transitions are for non-urgent updates and should provide feedback (isPending) when the user can perceive a wait; they do not replace debouncing, virtualization, or correct effects.

Reducing subscriptions

  • Do not subscribe to values that are only read inside callbacks; read them on demand at the usage point (for example, parse window.location.search in the handler instead of subscribing to search parameters).
  • Subscribe to derived state, such as a boolean media query, instead of a continuously changing raw value like viewport width, to reduce notification frequency.
  • Keep transient high-frequency values (pointer position, transient flags) in a ref and update the DOM imperatively; reserve state for UI that must re-render.

Scanner limitations

It recognizes direct syntax patterns (createContext, useContext, providers, useMemo, and useTransition) and checks the React and use-context-selector combination. It does not resolve aliases, external stores, data flow, comparators, or measure renders. Review renamed imports and advanced patterns manually.

Files

  • scripts/scan-context-rerenders.js: AST scanner and deterministic CLI.
  • checklists/state-checklist.md: diagnosis, choices, and validation.
  • examples/before/AppContext.jsx: illustrative monolithic context.
  • examples/after/SplitByDomain.jsx: separate native providers.
  • examples/after/SplitStateAndDispatch.jsx: separate state and dispatch contexts.
  • examples/after/UseContextSelector.jsx: optional alternative with an explicit dependency.

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.