From a5909bd6ffe7e71cf1582ad0175063546602c28f Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Mon, 24 Apr 2023 14:49:40 +0200
Subject: [PATCH] feature: keep callbacks between two renders

---
 .../table/table-header/TableHeader.tsx        | 40 +++++++++++--------
 front/src/pages/people/People.tsx             |  6 +--
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx
index 0510a56aa..6df436aea 100644
--- a/front/src/components/table/table-header/TableHeader.tsx
+++ b/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>
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index 0678495ee..b31ba1736 100644
--- a/front/src/pages/people/People.tsx
+++ b/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);