return Promise.reject(error);
export const useAuthStore = create<AuthStore>((set) => ( user: null, isAuthenticated: false, login: (user) => set( user, isAuthenticated: true ), logout: () => set( user: null, isAuthenticated: false ), )); Never call fetch or axios directly inside a component. Build a structured data layer:
apiClient.interceptors.response.use( (res) => res, async (error) => if (error.response?.status === 401) // redirect to login react application architecture for production pdf
export class ErrorBoundary extends Component<Props, hasError: boolean > state = hasError: false ;
| Principle | Description | |-----------|-------------| | | UI components should not know about data fetching or business logic. | | Single Responsibility | Each file/folder should have one reason to change. | | Dependency Inversion | High-level modules (pages) should not depend on low-level modules (API utils). Both should depend on abstractions (hooks/services). | | Colocation | Keep styles, tests, and utilities close to the components that use them. | | Lazy Loading | Never load code the user doesn't need immediately. | 3. Folder Structure by Features Avoid organizing by file type (e.g., components/ , containers/ , services/ ). Instead, use feature-based organization : return Promise
[data-theme="dark"] --color-background: #1e1e2e; --color-primary: #60a5fa;
| State Type | Solution | Example | |------------|----------|---------| | | TanStack Query (React Query) + fetch | List of users, product details | | URL state | React Router | Query params, route params | | Client global state | Zustand / Redux Toolkit | User session, theme preference | | Local UI state | useState / useReducer | Form input, modal open/close | | | Dependency Inversion | High-level modules (pages)
path: '*', element: <NotFoundPage />, , ]);