react

Standards Detection

Search for ESLint config (.eslintrc.*, eslint.config.*, package.json). If found, merge with baseline (ESLint takes precedence). Otherwise use baseline only.

Baseline Standards

Types & Imports

• Use type (not interface)
• Use import type for type-only imports
• Naming: ComponentNameProps, UseHookNameOptions
• Order: types → libraries → components → utilities → styles

Naming

Components

• Functional components with arrow functions
• Destructure props with defaults
• Named exports preferred
• Set displayName
• Memoize: useCallback for callbacks, useMemo for computations
• Early returns for guards
• Conditional rendering with &&

Custom Components

type ComponentNameProps = {}

export const ComponentName: FC<ComponentNameProps> = props => {
  const {} = props
}

ComponentName.displayName = 'ComponentName'

Custom Hooks

export function useHookName(options: UseHookNameOptions) {
  const { a, b } = options
  // a, b
  return {}
}

Code Style

• TypeScript strict mode
• Avoid any → use unknown or specific types
• Prefer const over let
• Single responsibility functions