frontend-dev-guidelines

Modern React project structure best practices organize files into dedicated features and components directories, ensuring maintainability and scalability. This standardized approach separates concerns, making large applications easier to navigate and refactor.

Implement Suspense and lazy loading in React by wrapping dynamic component imports and asynchronous data fetching boundaries with the Suspense component. This pattern defers rendering until data or code is ready, improving initial load performance.

Integrate TanStack Query for React data fetching by defining strongly typed query hooks with explicit return types and type imports. This TypeScript integration ensures type safety across your API state management and data fetching processes.

Yes, these React guidelines explicitly support building applications with MUI v7 for styling and TanStack Router for routing. The patterns integrate these specific tools to create a cohesive and performant modern frontend architecture.

Use TypeScript type imports and explicit return types in React components to enforce strong typing across your application. This practice prevents type-related runtime errors and improves overall code maintainability and developer experience.