typescript

Components

• Use function components with typed props.
• Prefer React.FC only when children typing is needed; otherwise avoid.
• Memoize when beneficial (React.memo, useMemo, useCallback).

Props & State

• Type props with interfaces or type aliases (PascalCase).
• Use readonly for immutable props/state shapes.
• Avoid any; use unknown when necessary.
• Prefer discriminated unions for state machines.

Hooks

• Extract logic into custom hooks.
• Type hook return values explicitly.
• Avoid unnecessary dependencies in hook arrays.

Data & Types

• Store types in types.ts files.
• Use Zod for runtime validation.

Imports & Exports

• Prefer named imports and named exports.
• Always declare imports at the beginning of source files.
• Import order:
  1. External libs
  2. Internal modules
  3. Types
• Avoid default exports.

Error Handling

• Use custom error classes with code and optional context.
• Prefer Result<T, E> patterns for recoverable failures.

Async Patterns

• Use async/await.
• Wrap async code with try/catch.
• Avoid inline Promises inside JSX.

Performance

• Use as const for literals.
• Use mapped types for transformations.
• Use memoization and stable references to reduce re-renders.