Optimized code

hotel-management/src/pages/User/Table.tsx

@@ -15,6 +15,7 @@ import { useFetch } from '../../hooks/useFetch';
 
 // Styled
 import Spinner from '../../commons/styles/Spinner';
+import { useEffect, useState } from 'react';
 
 type TUserModal = { user: TUser };
 
@@ -54,15 +55,22 @@ const UserRow = ({ user }: TUserModal) => {
 
 const UserTable = () => {
   const { data, isPending, errorMsg } = useFetch('users');
-  let users: TUser[] = [];
+  const [users, setUsers] = useState<TUser[]>([]);
 
-  if (data) users = data;
+  useEffect(() => {
+    if (data) {
+      setUsers(data);
+    }
 
-  if (isPending) return <Spinner />;
+    if (errorMsg) {
+      console.error(errorMsg);
+    }
+  }, [data, errorMsg]);
 
-  if (errorMsg) console.error(errorMsg);
+  return (
-
+    <>
-  return users.length ? (
+      {isPending && <Spinner />}
+      {users.length ? (
         <Direction>
           <StyledOperationTable>
             <p>Sort / Search table</p>
@@ -86,6 +94,8 @@ const UserTable = () => {
         </Direction>
       ) : (
         <Message>No data to show here!</Message>
+      )}
+    </>
   );
 };