frontend-dev-guidelines

For modern React applications, the best practice for data fetching is using `useSuspenseQuery` combined with Suspense boundaries. This approach standardizes loading states and ensures components remain clean while managing asynchronous data predictably.

To set up TanStack Router, follow the provided routing implementation details for structured navigation within your TypeScript project. This ensures type-safe routing and maintainable navigation structures for modern frontend development.

Yes, these guidelines cover MUI v7 styling best practices, including recommendations on when to use inline styles versus separate files. This ensures consistent and maintainable styling across your React components.

To optimize React performance, apply techniques like lazy loading, `useCallback`, and `useMemo` as specified in the guidelines. These patterns prevent unnecessary re-renders and memoize expensive calculations for efficient component updates.

For new React component development, follow the TypeScript standards outlined in the guidelines to ensure type safety and maintainability. The "New Component Checklist" helps verify proper structure, lazy loading, and Suspense boundary wrapping.

You should use Suspense boundaries in React frontend development when implementing `useSuspenseQuery` for data fetching. Wrapping lazy-loaded components in Suspense boundaries provides seamless loading states and improves user experience.