# Optimize React Application Performance

React apps can slow down because renders, lists, bundles, images, and heavy computations grow unnoticed. This skill gives practical patterns for diagnosing and reducing those costs.

## Install

```bash
npx skillstore add cjharmath/react-performance
```

## Metadata

- Status: approved
- Slug: cjharmath-react-performance
- Skillstore revision: r1
- Version status: missing
- Tree hash: fc3b3d82f3bd51f0e3a0e7ffe53b00feb2843584f20c45a700b99867aaf7ccdb
- Author: CJHarmath
- GitHub username: CJHarmath
- License: MIT
- Repository: https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/react-performance
- Ref: dd4a3ef9f20ddf38830950b4bb713df96b431fd6
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: scripts, external\_commands, env\_access
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/cjharmath-react-performance
- Manifest: https://skillstore.pages.dev/api/skills/cjharmath-react-performance/manifest

## Capabilities

- Explains when to use useMemo, useCallback, and React.memo.
- Shows list virtualization patterns with react-window.
- Improves Zustand selectors to reduce unnecessary renders.
- Covers code splitting, image lazy loading, and worker offloading.
- Provides profiling checks with React DevTools and why-did-you-render.

## Use Cases

- Tune Complex Lists: Identify when a long list needs virtualization, memoized rows, stable callbacks, and measured scroll performance.
- Review Render Patterns: Check a React feature for unnecessary renders before a release or during a performance review.
- Reduce Interaction Lag: Plan small changes for slower filters, searches, dashboards, and routes that delay user actions.

## Prompt Templates

### Find Render Hotspots

```
Review this React component and identify likely unnecessary renders. Suggest the smallest changes first.
```

### Optimize a Long List

```
Convert this large list view to a virtualization plan. Include item sizing, memoization, and accessibility checks.
```

### Refactor State Selectors

```
Audit these Zustand selectors and component props. Propose selector, shallow comparison, and memoization changes.
```

### Design a Performance Plan

```
Create a prioritized React performance plan for this feature. Cover profiling, bundle splitting, worker offloading, and validation metrics.
```

## Limitations

- Does not run performance benchmarks or inspect an application automatically.
- Examples require adaptation to the user's React framework and data model.
- Does not replace browser profiling or production monitoring.
- Focused on React web applications, not React Native.

## Best Practices

- Profile before changing code, then measure the same interaction after each optimization.
- Apply memoization only when props are stable and render cost is meaningful.
- Prefer targeted selectors and virtualized lists before adding broad architectural changes.

## Anti Patterns

- Memoizing every value without measuring render cost.
- Passing new objects or callbacks into memoized children on every render.
- Selecting whole stores when components only need one field.

## Security Audit

- Audited at: 2026-07-06T05:11:12.581\+00:00
- Summary: The static findings are false positives from Markdown examples for React performance patterns. Dynamic imports, a worker example, and NODE\_ENV appear only in documentation snippets. No prompt injection, data exfiltration intent, or malicious workflow was found in SKILL.md.

## Stats

- Views: 203
- Downloads: 11
- Favorites: 0
- Popularity score: 0