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,38 +55,47 @@ 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 (
+    <>
+      {isPending && <Spinner />}
+      {users.length ? (
+        <Direction>
+          <StyledOperationTable>
+            <p>Sort / Search table</p>
+          </StyledOperationTable>
 
-  return users.length ? (
-    <Direction>
-      <StyledOperationTable>
-        <p>Sort / Search table</p>
-      </StyledOperationTable>
-
-      <Menus>
-        <Table columns="10% 30% 20% 20% 10% 5%">
-          <Table.Header>
-            <div>Id</div>
-            <div>Name</div>
-            <div>Identified Code</div>
-            <div>Phone</div>
-            <div>Room</div>
-          </Table.Header>
-          <Table.Body<TUser>
-            data={users}
-            render={(user: TUser) => <UserRow user={user} key={user.id} />}
-          />
-        </Table>
-      </Menus>
-    </Direction>
-  ) : (
-    <Message>No data to show here!</Message>
+          <Menus>
+            <Table columns="10% 30% 20% 20% 10% 5%">
+              <Table.Header>
+                <div>Id</div>
+                <div>Name</div>
+                <div>Identified Code</div>
+                <div>Phone</div>
+                <div>Room</div>
+              </Table.Header>
+              <Table.Body<TUser>
+                data={users}
+                render={(user: TUser) => <UserRow user={user} key={user.id} />}
+              />
+            </Table>
+          </Menus>
+        </Direction>
+      ) : (
+        <Message>No data to show here!</Message>
+      )}
+    </>
   );
 };