---
description: React best practices
alwaysApply: true
---

# React Architecture

- Use functional components only
- Use hooks instead of class components
- Keep components focused and small
- Extract reusable logic into custom hooks
- Prefer composition over inheritance

# TypeScript

- Do not use any
- Define explicit props interfaces
- Prefer type inference when possible
- Use utility types instead of duplicated types

# State Management

- Keep state as local as possible
- Avoid unnecessary global state
- Avoid deeply nested props drilling
- Use useReducer for complex state logic

# Performance

- Use useMemo only for expensive calculations
- Do not overuse useCallback
- Avoid premature optimization
- Avoid unnecessary re-renders

# Effects

- Avoid unnecessary useEffect
- Do not derive state inside useEffect
- Keep effects focused and clean

# Component Design

- Keep JSX readable
- Avoid large render blocks
- Extract complex UI into subcomponents
- Use semantic naming

# Styling

- SCSS nesting must follow DOM structure
- Avoid deeply nested selectors
- Use semantic class names

# i18n

- Do not hardcode user-facing text
- All UI text must support i18n

# Code Quality

- Prefer early return
- Avoid duplicated logic
- Keep files maintainable
- Prioritize readability over abstraction