General React & React Native Patterns

General React & React Native Patterns

These rules apply to all files, including those inside src/mvvm/. See mvvm-architecture for MVVM-specific structure.

Component Architecture

• Prefer functional components.
• Keep components focused and reasonably sized.
• Decompose large UI into smaller reusable elements.
• Use composition for extensibility.

State Management

• Prioritize local state for UI-only concerns.
• Use RTK Query (with slices) only when necessary for app-wide state. See rtk-query-api.
• Apply optimized selectors to limit re-rendering.
• Connect Redux at the lowest component level when possible.

Styling

• Mobile: use Lumen UI React Native — see ldls-native.
• Desktop: use Lumen UI React — see ldls-web.
• All styles must support theme switching (dark/light mode).

Performance

• Memoize expensive operations with useMemo.
• Stabilize callbacks with useCallback.
• Wrap costly components in React.memo.
• Apply list virtualization where needed.
• Use lazy loading for large screens or modules.

Navigation

• Mobile: use React Navigation; ensure correct deep-link support; keep navigation types strict.
• Desktop: use React Router; implement route guards when necessary; maintain clear history logic.

Data Fetching

• Use RTK Query. See rtk-query-api.