From 6467da5cabb27474322d7c3b6fb37c0c96a80cd3 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Fri, 23 Aug 2024 19:31:27 +0200
Subject: [PATCH] Fix table re-renders on update field (#6722)

The update of all fields was caused by `useContextSelector` not being
properly implemented.

As it is a memoization library the `useRecordFieldValue` hook wasn't
giving to the library the required things to allow memoization.

I just added recordId + fieldName to the memoization function so that
`useContextSelector` doesn't recompute itself whenever any record
changes.
---
 .../contexts/RecordFieldValueSelectorContext.tsx       | 10 +++++-----
 .../ui/field/display/components/EmailDisplay.tsx       |  2 +-
 .../ui/field/display/components/NumberDisplay.tsx      |  2 +-
 .../ui/field/display/components/PhoneDisplay.tsx       |  4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-store/contexts/RecordFieldValueSelectorContext.tsx b/packages/twenty-front/src/modules/object-record/record-store/contexts/RecordFieldValueSelectorContext.tsx
index a83d43531..1a6bc529a 100644
--- a/packages/twenty-front/src/modules/object-record/record-store/contexts/RecordFieldValueSelectorContext.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-store/contexts/RecordFieldValueSelectorContext.tsx
@@ -30,22 +30,22 @@ export const useSetRecordValue = () => {
 export const useRecordValue = (recordId: string) => {
   const tableValue = useContextSelector(
     RecordFieldValueSelectorContext,
-    (value) => value[0],
+    (value) => value[0]?.[recordId],
   );
 
-  return tableValue?.[recordId] as ObjectRecord | undefined;
+  return tableValue as ObjectRecord | undefined;
 };
 
 export const useRecordFieldValue = <T,>(
   recordId: string,
   fieldName: string,
 ) => {
-  const recordFieldValues = useContextSelector(
+  const recordFieldValue = useContextSelector(
     RecordFieldValueSelectorContext,
-    (value) => value[0],
+    (value) => value[0]?.[recordId]?.[fieldName],
   );
 
-  return recordFieldValues?.[recordId]?.[fieldName] as T;
+  return recordFieldValue as T | undefined;
 };
 
 export const useSetRecordFieldValue = () => {
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx
index 60b8ef996..2fe096c17 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx
@@ -20,7 +20,7 @@ const validateEmail = (email: string) => {
 };
 
 type EmailDisplayProps = {
-  value: string | null;
+  value: string | null | undefined;
 };
 
 export const EmailDisplay = ({ value }: EmailDisplayProps) => {
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/NumberDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/NumberDisplay.tsx
index 5a8dc13c3..1834e502a 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/NumberDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/NumberDisplay.tsx
@@ -3,7 +3,7 @@ import { formatNumber } from '~/utils/format/number';
 import { EllipsisDisplay } from './EllipsisDisplay';
 
 type NumberDisplayProps = {
-  value: string | number | null;
+  value: string | number | null | undefined;
 };
 
 export const NumberDisplay = ({ value }: NumberDisplayProps) => (
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx
index f4cdc8519..d18ac3510 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx
@@ -1,11 +1,11 @@
-import { MouseEvent } from 'react';
 import { parsePhoneNumber, PhoneNumber } from 'libphonenumber-js';
+import { MouseEvent } from 'react';
 
 import { ContactLink } from '@/ui/navigation/link/components/ContactLink';
 import { isDefined } from '~/utils/isDefined';
 
 type PhoneDisplayProps = {
-  value: string | null;
+  value: string | null | undefined;
 };
 
 // TODO: see if we can find a faster way to format the phone number