Fix minor sorting bug and add debounce custom hook for filtering the items

src/components/MUI/Examples/PagingSortingFilteringExample.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
 	Paper,
 	Box,
@@ -14,12 +14,12 @@ import {
 } from '@mui/material';
 // import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector, batch } from 'react-redux';
+import useDebounce from '../../../hooks/useDebounceHook';
 import {
 	itemsSelector,
 	pageSelector,
 	itemsPerPageSelector,
 	countSelector,
-	filterSelector,
 	sortSelector,
 } from '../../../store/selectors/randomDataSelectors';
 import {
@@ -31,20 +31,41 @@ import {
 } from '../../../store/actions/randomData/randomDataActions';
 
 const PagingSortingFilteringExample = () => {
+	const [filterText, setFilterText] = useState('');
+
 	const dispatch = useDispatch();
 	// const { t } = useTranslation();
 	const items = useSelector(itemsSelector);
 	const currentPage = useSelector(pageSelector);
 	const itemsPerPage = useSelector(itemsPerPageSelector);
 	const totalCount = useSelector(countSelector);
-	const filter = useSelector(filterSelector);
 	const sort = useSelector(sortSelector) || 'name-asc';
 
+    // Use debounce to prevent too many rerenders
+	const debouncedFilterText = useDebounce(filterText, 500);
+
 	useEffect(() => {
 		dispatch(loadData(30));
 		dispatch(updateSort(sort));
 	}, []);
 
+	useEffect(() => {
+		batch(() => {
+			dispatch(updateFilter(filterText));
+			currentPage > 0 && dispatch(updatePage(0));
+		});
+	}, [debouncedFilterText]);
+
+	const handleFilterTextChange = (event) => {
+		const filterText = event.target.value;
+		setFilterText(filterText);
+	};
+
+	const handleSortChange = (event) => {
+		const sort = event.target.value;
+		dispatch(updateSort(sort));
+	};
+
 	const handlePageChange = (event, newPage) => {
 		dispatch(updatePage(newPage));
 	};
@@ -57,18 +78,6 @@ const PagingSortingFilteringExample = () => {
 		});
 	};
 
-	const handleFilterChange = (event) => {
-		const filter = event.target.value;
-		batch(() => {
-			dispatch(updateFilter(filter));
-			currentPage > 0 && dispatch(updatePage(0));
-		});
-	};
-
-	const handleSortChange = (event) => {
-		const sort = event.target.value;
-		dispatch(updateSort(sort));
-	};
 
 	return (
 		<Paper
@@ -120,8 +129,8 @@ const PagingSortingFilteringExample = () => {
 						variant="outlined"
 						label="Filter"
 						placeholder="Filter"
-						value={filter}
-						onChange={handleFilterChange}
+						value={filterText}
+						onChange={handleFilterTextChange}
 					/>
 				</Box>
 			</Box>

src/hooks/useDebounceHook.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+const useDebounce = (value, delay) => {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+
+	useEffect(() => {
+		const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [value, delay]);
+
+	return debouncedValue;
+};
+
+export default useDebounce;

src/store/reducers/randomData/randomDataReducer.js

@@ -88,9 +88,9 @@ function updateSort(state, action) {
 		if (b[field] > a[field]) {
 			return sortDirection * -1;
 		}
+        return 0;
 	});
 
-	const items = state.items.length ? sorted : state.items;
 	const filteredItems = state.filteredItems.length
 		? sorted
 		: state.filteredItems;
@@ -98,7 +98,6 @@ function updateSort(state, action) {
 	return {
 		...state,
 		sort,
-		items,
 		filteredItems,
 	};
 }