feature: keep callbacks between two renders

front/src/components/table/table-header/TableHeader.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DropdownButton from './DropdownButton';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import SortAndFilterBar, { SortType } from './SortAndFilterBar';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 type OwnProps = {
   viewName: string;
@@ -52,23 +52,29 @@ function TableHeader({
 }: OwnProps) {
   const [sorts, setSorts] = useState([] as Array<SortType>);
 
-  const onSortItemSelect = (sortId: string) => {
-    const newSorts = [
-      {
-        label: 'Created at',
-        order: 'asc',
-        id: sortId,
-      } as SortType,
-    ];
-    setSorts(newSorts);
-    onSortsUpdate && onSortsUpdate(newSorts);
-  };
+  const onSortItemSelect = useCallback(
+    (sortId: string) => {
+      const newSorts = [
+        {
+          label: 'Created at',
+          order: 'asc',
+          id: sortId,
+        } as SortType,
+      ];
+      setSorts(newSorts);
+      onSortsUpdate && onSortsUpdate(newSorts);
+    },
+    [onSortsUpdate],
+  );
 
-  const onSortItemUnSelect = (sortId: string) => {
-    const newSorts = [] as SortType[];
-    setSorts(newSorts);
-    onSortsUpdate && onSortsUpdate(newSorts);
-  };
+  const onSortItemUnSelect = useCallback(
+    (sortId: string) => {
+      const newSorts = [] as SortType[];
+      setSorts(newSorts);
+      onSortsUpdate && onSortsUpdate(newSorts);
+    },
+    [onSortsUpdate],
+  );
 
   return (
     <StyledContainer>

front/src/pages/people/People.tsx

@@ -4,7 +4,7 @@ import Table from '../../components/table/Table';
 import styled from '@emotion/styled';
 import { peopleColumns } from './people-table';
 import { GraphqlPerson, mapPerson } from '../../interfaces/person.interface';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { SortType } from '../../components/table/table-header/SortAndFilterBar';
 import { OrderBy, usePeopleQuery } from '../../services/people';
 
@@ -31,10 +31,10 @@ function People() {
   const [, setSorts] = useState([] as Array<SortType>);
   const [orderBy, setOrderBy] = useState(defaultOrderBy);
 
-  const updateSorts = (sorts: Array<SortType>) => {
+  const updateSorts = useCallback((sorts: Array<SortType>) => {
     setSorts(sorts);
     setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
-  };
+  }, []);
 
   const { data } = usePeopleQuery(orderBy);