react-performance-practices

Files (73)

• LICENSE.txt
• SKILL.md
• openai.yaml · agents/
• advanced-effect-event-deps.md · references/
• advanced-event-handler-refs.md · references/
• advanced-init-once.md · references/
• advanced-use-latest.md · references/
• async-api-routes.md · references/
• async-cheap-condition-before-await.md · references/
• async-defer-await.md · references/
• async-dependencies.md · references/
• async-parallel.md · references/
• async-suspense-boundaries.md · references/
• bundle-analyzable-paths.md · references/
• bundle-barrel-imports.md · references/
• bundle-conditional.md · references/
• bundle-defer-third-party.md · references/
• bundle-dynamic-imports.md · references/
• bundle-preload.md · references/
• client-event-listeners.md · references/
• client-localstorage-schema.md · references/
• client-passive-event-listeners.md · references/
• client-swr-dedup.md · references/
• js-batch-dom-css.md · references/
• js-cache-function-results.md · references/
• js-cache-property-access.md · references/
• js-cache-storage.md · references/
• js-combine-iterations.md · references/
• js-early-exit.md · references/
• js-flatmap-filter.md · references/
• js-hoist-regexp.md · references/
• js-index-maps.md · references/
• js-length-check-first.md · references/
• js-min-max-loop.md · references/
• js-request-idle-callback.md · references/
• js-set-map-lookups.md · references/
• js-tosorted-immutable.md · references/
• rendering-activity.md · references/
• rendering-animate-svg-wrapper.md · references/
• rendering-conditional-render.md · references/
• rendering-content-visibility.md · references/
• rendering-hoist-jsx.md · references/
• rendering-hydration-no-flicker.md · references/
• rendering-hydration-suppress-warning.md · references/
• rendering-resource-hints.md · references/
• rendering-script-defer-async.md · references/
• rendering-svg-precision.md · references/
• rendering-usetransition-loading.md · references/
• rerender-defer-reads.md · references/
• rerender-dependencies.md · references/
• rerender-derived-state-no-effect.md · references/
• rerender-derived-state.md · references/
• rerender-functional-setstate.md · references/
• rerender-lazy-state-init.md · references/
• rerender-memo-with-default-value.md · references/
• rerender-memo.md · references/
• rerender-move-effect-to-event.md · references/
• rerender-no-inline-components.md · references/
• rerender-simple-expression-in-memo.md · references/
• rerender-split-combined-hooks.md · references/
• …and 13 more

SKILL.md (first lines)

# React Performance Practices

Optimize measured bottlenecks without weakening correctness, security, accessibility, or maintainability.

## Process

1. Identify the user-visible performance problem and capture a baseline when tooling permits.
2. Inspect the relevant runtime boundary: async work, bundle, server, client fetching, rendering, re-rendering, or JavaScript hot path.
3. Read only the matching reference rules below.
4. Apply critical and high-impact rules before micro-optimizations.
5. Preserve framework-version compatibility; verify APIs against installed versions.
6. Run type checks, tests, and the relevant profiler or build measurement.
7. Report the before/after evidence and any unmeasured risk.

## Rule library

### Async and waterfalls

- [API routes](references/async-api-routes.md)
- [Cheap conditions before await](references/async-cheap-condition-before-await.md)
- [Deferred await](references/async-defer-await.md)
- [Partial dependencies](references/async-dependencies.md)
- [Parallel promises](references/async-parallel.md)
- [Suspense boundaries](references/async-suspense-boundaries.md)

### Bundle size

- [Analyzable paths](references/bundle-analyzable-paths.md)
- [Barrel imports](references/bundle-barrel-imports.md)
- [Conditional loading](references/bundle-conditional.md)
- [Deferred third-party code](references/bundle-defer-third-party.md)
- [Dynamic imports](references/bundle-dynamic-imports.md)
- [Intent-based preload](references/bundle-preload.md)

### Server

- [Non-blocking post-response work](references/server-after-nonblocking.md)
- [Server action authorization](references/server-auth-actions.md)
- [Cross-request LRU cache](references/server-cache-lru.md)
- [Per-request React cache](references/server-cache-react.md)
- [Serialized prop deduplication](references/server-dedup-props.md)
- [Static I/O](references/server-hoist-static-io.md)
- [Shared module state](references/server-no-shared-module-state.md)
- [Parallel server fetching](references/server-parallel-fetching.md)
- [Parallel nested fetching](references/server-parallel-nested-fetching.md)
- [Serialization boundaries](references/server-serialization.md)

### Client data

- [Shared event listeners](references/client-event-listeners.md)
- [Local storage schemas](references/client-localstorage-schema.md)
- [Passive event listeners](references/client-passive-event-listeners.md)
- [Request deduplication](references/client-swr-dedup.md)

### Re-renders

- [Deferred state reads](references/rerender-defer-reads.md)
- [Primitive dependencies](references/rerender-dependencies.md)
- [Derived state without effects](references/rerender-derived-state-no-effect.md)
- [Derived subscriptions](references/rerender-derived-state.md)
- [Functional state updates](references/rerender-functional-setstate.md)
- [Lazy state initialization](references/rerender-lazy-state-init.md)
- [Memo default values](references/rerender-memo-with-default-value.md)
- [Memoized components](references/rerender-memo.md)
- [Move effects to events](references/rerender-move-effect-to-event.md)
- [Inline component definitions](references/rerender-no-inline-components.md)
- [Simple memo expressions](references/rerender-simple-expression-in-memo.md)
- [Split combined hooks](references/rerender-split-combined-hooks.md)
- [Transitions](references/rerender-transitions.md)
- [Deferred values](references/rerender-use-deferred-value.md)
- [Transient refs](references/rerender-use-ref-transient-values.md)

### Rendering

- [Activity visibility](references/rendering-activity.md)
- [SVG animation wrappers](references/rendering-animate-svg-wrapper.md)
- [Conditional rendering](references/rendering-conditional-render.md)
- [Content visibility](references/rendering-content-visibility.md)
- [Hoisted JSX](references/rendering-hoist-jsx.md)
- [Hydration without flicker](references/rendering-hydration-no-flicker.md)
- [Expected hydration mismatches](references/rendering-hydration-suppress-warning.md)
- [Resource hints](references/rendering-resource-hints.md)
- [Script loading](references/rendering-script-defer-async.md)
- [SVG precision](references/rendering-svg-precision.md)
- [Transition loading state](references/rendering-usetransition-loading.md)

### JavaScript hot paths

- [Batched DOM styles](references/js-batch-dom-css.md)
- [Cached function results](references/js-cache-function-results.md)
- [Cached property access](references/js-cache-property-access.md)
- [Cached browser storage](references/js-cache-storage.md)
- [Combined iterations](references/js-combine-iterations.md)
- [Early exit](references/js-early-exit.md)
- [Flat-map filtering](references/js-flatmap-filter.md)
- [Hoisted regular expressions](references/js-hoist-regexp.md)
- [Indexed lookups](references/js-index-maps.md)
- [Length checks](references/js-length-check-first.md)
- [Min/max loops](references/js-min-max-loop.md)
- [Idle callbacks](references/js-request-idle-callback.md)
- [Set and map lookups](references/js-set-map-lookups.md)
- [Immutable sorting](references/js-tosorted-immutable.md)

### Advanced patterns

- [Effect event dependencies](references/advanced-effect-event-deps.md)
- [Event handler refs](references/advanced-event-handler-refs.md)
- [One-time initialization](references/advanced-init-once.md)
- [Latest-value refs](references/advanced-use-latest.md)

From deepaktiwari09/team-agent-skills, MIT.

More from deepaktiwari09/team-agent-skills