pn-react

React rules

Component Architecture

• Prefer function components and hooks. Use const for component names.
• Keep components focused: one main responsibility. Extract sub-components when a file grows past ~150 lines or a component has more than one conceptual job.
• Co-locate related files: MyComponent.tsx, MyComponent.test.tsx, MyComponent.module.css in the same folder.
• Prop types: use TypeScript interfaces; prefer explicit over wide (string not any).
• Avoid prop drilling beyond 2 levels — use context, zustand, or composition instead.

Naming

• Components: PascalCase (UserCard, not userCard or user-card)
• Props and handlers: camelCase (onClick, isLoading, userProfile)
• CSS classes: kebab-case for BEM; or rely on Tailwind/CSS Modules
• Files: kebab-case for pages and utilities (user-profile.ts); PascalCase for components (UserProfile.tsx)
• Boolean props: prefix with is, has, can, should (isOpen, hasError, canEdit)

Hooks

• Follow Rules of Hooks: only call hooks at the top level, never inside conditions or loops.
• Extract repeated hook logic into custom hooks (useWindowSize, useDebounce).
• useEffect cleanup: always return a cleanup function for subscriptions, event listeners, and timers.
• Avoid useEffect for derived state — compute it during render instead.
• useMemo and useCallback: use when the computation is expensive or when referential equality matters for child props. Do NOT memo everything by default — it adds complexity without benefit in most cases.

Accessibility

• Use semantic HTML: <button> for actions, <a> for navigation, <input> with <label>, <h1>–<h6> in logical order.
• Every <img> needs alt. Decorative images use alt="".
• Icon-only buttons require aria-label or aria-labelledby.
• Interactive elements must be keyboard accessible (focusable, operable with Enter/Space).
• Never remove focus styles without an accessible replacement.
• Dynamic content changes: move focus to newly revealed content (modal, error message) when appropriate.