Optimized performance and fix type of object not correctly

hotel-management/src/components/OrderBy.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 
@@ -41,7 +42,7 @@ interface IOrderProps {
   }[];
 }
 
-const OrderBy = ({ options }: IOrderProps) => {
+const OrderBy = memo(({ options }: IOrderProps) => {
   const field = 'orderBy';
 
   const [searchParams, setSearchParams] = useSearchParams();
@@ -67,6 +68,6 @@ const OrderBy = ({ options }: IOrderProps) => {
       ))}
     </StyledOrder>
   );
-};
+});
 
 export default OrderBy;

hotel-management/src/components/Search.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 const StyledSearch = styled.input`
@@ -10,10 +10,10 @@ const StyledSearch = styled.input`
 
 interface ISearch {
   setPlaceHolder: string;
-  setValueSearch: React.Dispatch<React.SetStateAction<string>>;
+  setValueSearch: (phone: string) => void;
 }
 
-const Search = ({ setValueSearch, setPlaceHolder }: ISearch) => {
+const Search = memo(({ setValueSearch, setPlaceHolder }: ISearch) => {
   const [query, setQuery] = useState('');
 
   useEffect(() => {
@@ -30,6 +30,6 @@ const Search = ({ setValueSearch, setPlaceHolder }: ISearch) => {
       placeholder={setPlaceHolder}
     />
   );
-};
+});
 
 export default Search;

hotel-management/src/components/SortBy.tsx

@@ -2,6 +2,7 @@ import { useSearchParams } from 'react-router-dom';
 
 // Components
 import Select from './Select';
+import { memo } from 'react';
 
 interface ISortByProps {
   options: {
@@ -10,7 +11,7 @@ interface ISortByProps {
   }[];
 }
 
-const SortBy = ({ options }: ISortByProps) => {
+const SortBy = memo(({ options }: ISortByProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const sortBy = searchParams.get('sortBy') || '';
 
@@ -27,6 +28,6 @@ const SortBy = ({ options }: ISortByProps) => {
       onChange={handleChange} 
     />
   );
-};
+});
 
 export default SortBy;