admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix table re-renders on update field (#6722)

Browse Source 
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.
This commit is contained in:
Lucas Bordeau
2024-08-23 19:31:27 +02:00
committed by GitHub
parent e49acae851
commit 6467da5cab
4 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/object-record/record-store/contexts/RecordFieldValueSelectorContext.tsx
View File

@ -30,22 +30,22 @@ export const useSetRecordValue = () => {
export const useRecordValue = (recordId: string) => { export const useRecordValue = (recordId: string) => {
const tableValue = useContextSelector( const tableValue = useContextSelector(
RecordFieldValueSelectorContext, RecordFieldValueSelectorContext,
(value) => value[0], (value) => value[0]?.[recordId],
); );
return tableValue?.[recordId] as ObjectRecord | undefined; return tableValue as ObjectRecord | undefined;
}; };
export const useRecordFieldValue = <T,>( export const useRecordFieldValue = <T,>(
recordId: string, recordId: string,
fieldName: string, fieldName: string,
) => { ) => {
const recordFieldValues = useContextSelector( const recordFieldValue = useContextSelector(
RecordFieldValueSelectorContext, RecordFieldValueSelectorContext,
(value) => value[0], (value) => value[0]?.[recordId]?.[fieldName],
); );
return recordFieldValues?.[recordId]?.[fieldName] as T; return recordFieldValue as T | undefined;
}; };
export const useSetRecordFieldValue = () => { export const useSetRecordFieldValue = () => {

2
packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx
View File

@ -20,7 +20,7 @@ const validateEmail = (email: string) => {
}; };
type EmailDisplayProps = { type EmailDisplayProps = {
value: string | null; value: string | null | undefined;
}; };
export const EmailDisplay = ({ value }: EmailDisplayProps) => { export const EmailDisplay = ({ value }: EmailDisplayProps) => {

2
packages/twenty-front/src/modules/ui/field/display/components/NumberDisplay.tsx
View File

@ -3,7 +3,7 @@ import { formatNumber } from '~/utils/format/number';
import { EllipsisDisplay } from './EllipsisDisplay'; import { EllipsisDisplay } from './EllipsisDisplay';
type NumberDisplayProps = { type NumberDisplayProps = {
value: string | number | null; value: string | number | null | undefined;
}; };
export const NumberDisplay = ({ value }: NumberDisplayProps) => ( export const NumberDisplay = ({ value }: NumberDisplayProps) => (

4
packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx
View File

@ -1,11 +1,11 @@
import { MouseEvent } from 'react';
import { parsePhoneNumber, PhoneNumber } from 'libphonenumber-js'; import { parsePhoneNumber, PhoneNumber } from 'libphonenumber-js';
import { MouseEvent } from 'react';
import { ContactLink } from '@/ui/navigation/link/components/ContactLink'; import { ContactLink } from '@/ui/navigation/link/components/ContactLink';
import { isDefined } from '~/utils/isDefined'; import { isDefined } from '~/utils/isDefined';
type PhoneDisplayProps = { type PhoneDisplayProps = {
value: string | null; value: string | null | undefined;
}; };
// TODO: see if we can find a faster way to format the phone number // TODO: see if we can find a faster way to format the phone number