avoid useless re-rendering

src/contexts/PendingEditContext.tsx

@@ -4,6 +4,7 @@ import {
   useCallback,
   useContext,
   useMemo,
+  useReducer,
   useState,
 } from 'react';
 import { Button } from 'antd';
@@ -28,33 +29,47 @@ type PendingEditContextType = {
   addPendingEdit: (edit: Omit<PendingEdit, 'connectionSlug' | 'state'>) => void;
 };
 const PendingEditContext = createContext<PendingEditContextType | null>(null);
+
+type State = Array<PendingEdit>;
+
+type Action = { type: 'add'; edit: PendingEdit };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'add':
+      return [...state, action.edit];
+    default:
+      return state;
+  }
+}
+
 export function PendingEditContextProvider({
   children,
 }: {
   children: ReactNode;
 }) {
   const { currentConnectionSlug } = useConnectionContext();
-  const [pendingEdits, setPendingEdits] = useState<Array<PendingEdit>>([]);
+  const [pendingEdits, dispatch] = useReducer(reducer, []);
 
   const addPendingEdit = useCallback(
     (edit: Omit<PendingEdit, 'connectionSlug' | 'state'>) => {
       invariant(currentConnectionSlug, 'Current connection slug should be set');
 
-      setPendingEdits((prev) => [
-        ...prev,
-        {
+      dispatch({
+        type: 'add',
+        edit: {
           state: PendingEditState.Pending,
           connectionSlug: currentConnectionSlug,
           ...edit,
         },
-      ]);
+      });
     },
     [currentConnectionSlug]
   );
 
   const value = useMemo(
     () => ({ pendingEdits, addPendingEdit }),
-    [pendingEdits, addPendingEdit]
+    [addPendingEdit, pendingEdits]
   );
 
   return (

src/renderer/component/Cell.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, memo } from 'react';
 import { Flex } from 'antd';
 import { Types } from 'mysql'; // immporting from mysql2 will import the commonjs package and will fail
 import { styled } from 'styled-components';
@@ -65,7 +65,10 @@ function EnumCell({ value }: { value: string }) {
   return <ForegroundSpan>{value}</ForegroundSpan>;
 }
 
-function TableCellFactory({ type, value }: TableCellFactoryProps) {
+const TableCellFactory = memo(function TableCellFactory({
+  type,
+  value,
+}: TableCellFactoryProps) {
   if (value === null || typeof value === 'undefined') {
     return <NullCell />;
   }
@@ -121,9 +124,9 @@ function TableCellFactory({ type, value }: TableCellFactoryProps) {
     default:
       throw new Error(`Type ${type} is not managed for now`);
   }
-}
+});
 
-export default function TableCellFactoryContainer({
+export default memo(function TableCellFactoryContainer({
   link,
   ...rest
 }: TableCellFactoryProps & { link?: ReactNode }) {
@@ -133,4 +136,4 @@ export default function TableCellFactoryContainer({
       {link}
     </Flex>
   );
-}
+});

src/renderer/component/ForeignKeyLink.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { useConnectionContext } from '../../contexts/ConnectionContext';
@@ -20,7 +21,7 @@ const StyledLink = styled(Link)`
   }
 `;
 
-export default function ForeignKeyLink({
+export default memo(function ForeignKeyLink({
   tableName,
   columnName,
   value,
@@ -41,4 +42,4 @@ export default function ForeignKeyLink({
   )}`;
 
   return <StyledLink to={to}>↗️</StyledLink>;
-}
+});

src/renderer/component/TableGrid.tsx

@@ -4,6 +4,7 @@ import {
   ReactElement,
   ReactNode,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -118,13 +119,16 @@ function CellWithPendingValue({
       <Cell
         type={field.type}
         value={futureValue}
-        link={
-          <ForeignKeyLink
-            tableName={field.table}
-            columnName={field.name}
-            value={futureValue}
-          />
-        }
+        link={useMemo(
+          () => (
+            <ForeignKeyLink
+              tableName={field.table}
+              columnName={field.name}
+              value={futureValue}
+            />
+          ),
+          [field.table, field.name, futureValue]
+        )}
       />
     </div>
   );