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.

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 = () => {

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) => {

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) => (

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