diff --git a/src/app/main.tsx b/src/app/main.tsx
index 308b0c3..cb632c1 100644
--- a/src/app/main.tsx
+++ b/src/app/main.tsx
@@ -3,8 +3,13 @@ import { createRoot } from 'react-dom/client';
import { App } from './app';
import './scss/main.scss';
+import { StrictMode } from 'react';
const container = document.querySelector('#app') as HTMLElement;
const root = createRoot(container);
-root.render();
+root.render(
+
+
+
+);
diff --git a/src/modules/users/api/api.ts b/src/modules/users/api/api.ts
index 4bd66de..cb559cc 100644
--- a/src/modules/users/api/api.ts
+++ b/src/modules/users/api/api.ts
@@ -1,10 +1,11 @@
import { jsonApiInstance } from '@/shared/api/instances';
import { User } from './types';
+import { GenericAbortSignal } from 'axios';
export const routes = {
users: '/users',
};
-export const fetchUsers = () => {
- return jsonApiInstance.get(routes.users);
+export const fetchUsers = (signal: GenericAbortSignal) => {
+ return jsonApiInstance.get(routes.users, { signal });
};
diff --git a/src/modules/users/lib/use-users.ts b/src/modules/users/lib/use-users.ts
index 5575b83..40e22b5 100644
--- a/src/modules/users/lib/use-users.ts
+++ b/src/modules/users/lib/use-users.ts
@@ -9,14 +9,22 @@ export const useUsers = () => {
const [error, setError] = useState('');
useEffect(() => {
+ const abortController = new AbortController();
+
setLoading(true);
setTimeout(() => {
- fetchUsers()
+ fetchUsers(abortController.signal)
.then(({ data }) => setUsers(data))
- .catch(() => setError('Error fetching users'))
+ .catch((error) => {
+ const isNotCancelled = error.name !== 'CanceledError';
+
+ if (isNotCancelled) setError('Error fetching users');
+ })
.finally(() => setLoading(false));
}, 800);
+
+ return () => abortController.abort();
}, []);
return { users, isLoading, error };