Memoize getTextFilter

Author: Arnei

src/components/shared/TableFilters.tsx

@@ -31,6 +31,7 @@ import DropDown from "./DropDown";
 import { AsyncThunk } from "@reduxjs/toolkit";
 import ButtonLikeAnchor from "./ButtonLikeAnchor";
 import { ParseKeys } from "i18next";
+import { Resource } from "../../slices/tableSlice";
 
 /**
  * This component renders the table filters in the upper right corner of the table
@@ -42,7 +43,7 @@ const TableFilters = ({
 }: {
 	loadResource: AsyncThunk<any, void, any>,
 	loadResourceIntoTable: () => AppThunk,
-	resource: string,
+	resource: Resource,
 }) => {
 	const { t } = useTranslation();
 	const dispatch = useAppDispatch();

src/selectors/tableFilterSelectors.ts

@@ -1,4 +1,6 @@
+import { createSelector } from "@reduxjs/toolkit";
 import { RootState } from "../store";
+import { Resource } from "../slices/tableSlice";
 
 /**
  * This file contains selectors regarding table filters
@@ -12,7 +14,10 @@ export const getSecondFilter = (state: RootState) => state.tableFilters.secondFi
 export const getCurrentFilterResource = (state: RootState) => state.tableFilters.currentResource;
 export const getFilters = (state: RootState, resource: string) =>
 	state.tableFilters.data.filter(obj => obj.resource === resource);
-export const getTextFilter = (state: RootState, resource: string) => {
-	const textFilter = state.tableFilters.textFilter.find(obj => obj.resource === resource);
-	return textFilter?.text ?? "";
-};
+export const getTextFilter = createSelector(
+	[getAllTextFilter, (state, resource: Resource) => resource],
+	(textFilter, resource) => {
+		const textFilte = textFilter.find(obj => obj.resource === resource);
+		return textFilte?.text ?? "";
+	},
+);