React Coding

React Coding Skill

• Follow existing project patterns, architecture, and conventions.
• Prefer functional components and React hooks.
• Keep components small, focused, and reusable.
• Use TypeScript with explicit, accurate types; avoid any.
• Keep UI, state, business logic, and data fetching separated when practical.
• Reuse existing components, hooks, utilities, and libraries before creating new ones.
• Avoid unnecessary re-renders, effects, memoization, and state.
• Prefer derived values over duplicated state.
• Handle loading, error, empty, and edge states explicitly.
• Keep JSX declarative and readable; avoid complex inline logic.
• Use stable keys and avoid array indexes when rendering dynamic lists.
• Preserve accessibility: semantic HTML, labels, keyboard support, and ARIA only when needed.
• Make the smallest necessary changes and avoid unrelated refactoring.
• Before adding a dependency, check whether the project already provides an equivalent solution.
• After changes, verify TypeScript, lint, tests, and build when available.