frontend-dev-guidelines

TanStack Query pairs with React Suspense boundaries to suspend component rendering until data resolves. This pattern replaces manual loading flags, eliminating UI loading-state flicker and streamlining asynchronous data fetching workflows.

Feature-based architecture organizes code into distinct feature folders containing isolated API, hook, type, and component boundaries. This structure keeps strict TypeScript codebases predictable and prevents tangled feature dependencies as applications scale.

Implement lazy loading by dynamically importing route-level components to reduce initial bundle size. This performance-safe pattern requires Suspense boundaries to manage the asynchronous loading state, ensuring smooth transitions without manual loading flags.

Yes, this architecture applies to building route-level pages, dialogs, data grids, forms, and mutation workflows. It ensures consistent error handling and snackbar feedback across complex production React components using strict typing.

The best way to prevent loading state flicker is adopting a Suspense-first data fetching strategy. By suspending component rendering until data is ready, React handles asynchronous states declaratively, avoiding manual loading flag management.

Strict typing enforces clear API boundaries within feature-based file organization. It prevents common frontend mistakes by ensuring type safety across data fetching, hooks, and component props, keeping large React codebases predictable as they grow.