frontend-dev-guidelines

Structure React components with lazy loading by wrapping dynamic imports in Suspense boundaries to handle loading states. This approach enforces type-safe component creation while optimizing performance through code splitting.

Fetch and cache data in React TypeScript applications using TanStack Query patterns. This method provides structured instructions for fetching, caching, and updating data while maintaining type safety and scalable state management.

Set up folder-based routing using TanStack Router with lazy-loaded route components. This navigation approach supports scalable codebases by splitting route code to enhance application speed and responsiveness.

Use MUI styling with the sx prop and responsive grid layouts for React component development. This method integrates theme capabilities to enforce organization and maintainable user interface architecture.

Optimize React frontend performance using memoization, debouncing, and code splitting techniques. These practices enhance app speed and responsiveness while maintaining scalable, maintainable codebases.

React applications need error boundaries and standardized loading states to ensure reliable user experience and error handling. This architecture prevents toxic code and supports safe component structures.