frontend-dev-guidelines

Suspense-based data fetching in React uses useSuspenseQuery from TanStack Query to handle async data loading declaratively. Wrap components in SuspenseLoader boundaries, define your data queries with proper TypeScript types, and React automatically manages loading and error states without callback chains.

Feature-based folder organization groups related components, pages, and services by feature rather than by type. This Skill defines folder structure standards that co-locate React.FC components, lazy-loaded modules, API services, and MUI styling within each feature directory for better maintainability and scalability.

Lazy loading splits code into chunks using React.lazy and suspends rendering until chunks load. Pair with Suspense boundaries and implement cache-first strategies via TanStack Query to prevent layout shift and optimize bundle size while maintaining responsive user experience.

MUI v7 integrates with TypeScript through the sx prop and styled components, providing type-safe styling without CSS-in-JS overhead. This Skill covers standardized MUI v7 styling patterns aligned with performance optimization and component architecture best practices.

TanStack Query manages server state, caching, and synchronization automatically, eliminating manual fetch calls and state management. useSuspenseQuery integrates with React Suspense for declarative loading boundaries, reducing boilerplate compared to useState/useEffect patterns.

Lazy loading with Suspense suits heavy components, routes, and features loaded on demand, preventing initial bundle bloat. Use it when components load infrequently or conditionally; reserve conditional rendering for lightweight toggles already in memory.