frontend-dev-guidelines

Feature-based architecture organizes React projects into logical, scalable feature directories. This approach groups components, hooks, and utilities by domain functionality rather than technical role, ensuring maintainability and clear boundaries as your application grows.

Optimize React performance by applying lazy loading for route components and memoization for expensive renders. Strict TypeScript practices ensure robust type safety, catching potential performance bottlenecks and structural issues during compilation rather than runtime.

Yes, MUI v7 integrates with strict TypeScript and feature-based React architecture. Following established component structure and styling conventions ensures your MUI implementation adheres to performance optimization and explicit type safety standards.

useSuspenseQuery improves React data fetching by integrating with Suspense to manage loading states declaratively. Unlike standard hooks that require manual loading state checks, it separates loading logic from component rendering, resulting in cleaner and more maintainable code.

Avoid Suspense-first data fetching when dealing with highly granular, independent loading requirements that demand concurrent partial UI updates. The pattern enforces opinionated loading boundaries, which may complicate interfaces needing granular control over multiple simultaneous data streams.