React Best Practices

React Best Practices

Purpose

Help the agent generate production-ready React code following modern React recommendations.

Use this skill when

• Building React components
• Refactoring React code
• Reviewing React PRs
• Fixing React bugs

Goals

• Readable code
• Maintainable component boundaries
• Good performance without premature memoization
• Accessible UI
• Strong TypeScript types when the project uses TypeScript

---

Core Principles

• Prefer composition over inheritance.
• Keep components focused on one responsibility.
• Derive state instead of duplicating it.
• Use effects for synchronizing with external systems.
• Favor semantic HTML and accessible interactions.
• Keep business logic in custom hooks when it improves clarity.
• Follow the existing project conventions before introducing a new pattern.

---

Best Practices

• Type props clearly.
• Handle loading, error, and empty states.
• Use stable keys for lists.
• Keep components easy to test.
• Prefer early returns over deeply nested conditionals.
• Split components when one file is carrying unrelated responsibilities.
• Use useMemo and useCallback for measured or structurally necessary cases, not as default decoration.

---

Anti-patterns

• Copying props into state without a synchronization reason.
• Creating effects for values that can be derived during render.
• Mutating state directly.
• Hiding business rules inside JSX branches that are hard to test.
• Prop drilling through many layers when composition or context would be clearer.

---

Decision Rules

If a value can be calculated from existing props or state, derive it during render.

If code synchronizes with the network, browser APIs, timers, subscriptions, or external systems, an effect may be appropriate.

If a component mixes data loading, domain logic, layout, and low-level UI details, split it into focused pieces.

If memoization makes the code harder to read and there is no measured need, remove it.

---

Completion Checklist

Before finishing, ensure:

• [ ] Semantic HTML is used where possible.
• [ ] Interactive elements have accessible names.
• [ ] Loading state is handled.
• [ ] Error state is handled.
• [ ] Empty state is handled.
• [ ] Derived state is not duplicated unnecessarily.
• [ ] Effects synchronize with external systems.
• [ ] Props and state are typed when TypeScript is available.
• [ ] The implementation follows project conventions.

---

Additional Resources

Read these supporting files when the task needs more detail:

• [examples.md](examples.md)
• [patterns.md](patterns.md)
• [anti-patterns.md](anti-patterns.md)
• [checklist.md](checklist.md)
• [references.md](references.md)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: piyushzala158
• Source: piyushzala158/agent-skills
• License: MIT

Install and usage instructions live in the source repository linked above.