frontend-dev-guidelines

Use React.FC with useSuspenseQuery for data fetching and wrap components in Suspense boundaries to eliminate isLoading checks. This pattern provides automatic loading state handling and cleaner component logic while improving user experience.

Organize code using a features directory structure with import aliases, apply lazy loading for routes, use React.FC components with useCallback and useMemo, and style with MUI sx. This structure scales maintainability, reduces bundle size, and prevents unnecessary re-renders.

Optimize rendering with useCallback for event handlers and useMemo for expensive computations, implement lazy loading for code splitting, use Suspense boundaries for data fetching, and follow strict TypeScript typing. These practices eliminate memory leaks, unnecessary re-renders, and improve load times.

Yes. TanStack Query handles server state with useSuspenseQuery while TanStack Router manages navigation and page organization. Combined with a features directory and MUI v7 styling, they form a complete frontend stack for scalable React/TypeScript applications.

MUI v7 integrates with modern React patterns through sx styling, pairs seamlessly with useSuspenseQuery for Suspense-aware UI, and supports TypeScript strict mode. This combination ensures consistent design, type safety, and performance across components.

Use lazy loading for route-level code splitting and Suspense boundaries when data fetching with useSuspenseQuery. Apply this pattern whenever creating components, pages, or features to reduce initial bundle size and provide smooth loading states without manual isLoading logic.