frontend-dev-guidelines

Suspense-based data fetching uses `useSuspenseQuery` from TanStack Query to handle data loading within React's Suspense boundaries. This approach prevents layout shifts and eliminates manual loading spinners by letting components declare their data dependencies upfront, improving perceived performance and user experience.

Organize your React TypeScript codebase into feature directories with clear `api/`, `components/`, `hooks/`, and `types/` subdirectories. This structured layout promotes maintainability, simplifies navigation, reduces naming conflicts, and enables team members to locate and modify code consistently across the project.

Optimize React performance by combining `React.lazy()` for code splitting, `useMemo` and `useCallback` for expensive computations, and `React.memo` for preventing unnecessary re-renders. These techniques ensure fast initial loads, smooth interactions, and efficient rendering without performance degradation.

Yes, this guidance covers cross-framework frontend development patterns applicable to React 18+, Vue 3, Svelte 5, and Angular. Core principles like component patterns, state management, performance optimization, and TypeScript integration translate across frameworks for consistent, scalable development.

MUI v7 integrates with TypeScript to provide typed styling through the sx prop and makeStyles API. Combine MUI components with TypeScript interfaces for props, use theme customization for consistency, and leverage alias imports to organize style dependencies cleanly alongside component logic.

Migration involves refactoring data fetching to `useSuspenseQuery`, organizing code into feature directories, adding TypeScript types, implementing lazy loading, and adopting centralized API services. Plan incrementally by migrating one feature at a time to avoid breaking changes and ensure smooth adoption of new patterns.