diff --git a/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx b/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx index 4a80a0cd4..b4a09b068 100644 --- a/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx @@ -1,18 +1,33 @@ import { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; -import { useSetRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; +import { + useRecordValue, + useSetRecordValue, +} from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; // TODO: should be optimized and put higher up export const RecordValueSetterEffect = ({ recordId }: { recordId: string }) => { - const setRecordValue = useSetRecordValue(); + const setRecordValueInContextSelector = useSetRecordValue(); - const recordValue = useRecoilValue(recordStoreFamilyState(recordId)); + const recordValueFromContextSelector = useRecordValue(recordId); + + const recordValueFromRecoil = useRecoilValue( + recordStoreFamilyState(recordId), + ); useEffect(() => { - setRecordValue(recordId, recordValue); - }, [setRecordValue, recordValue, recordId]); + if (!isDeeplyEqual(recordValueFromContextSelector, recordValueFromRecoil)) { + setRecordValueInContextSelector(recordId, recordValueFromRecoil); + } + }, [ + setRecordValueInContextSelector, + recordValueFromRecoil, + recordId, + recordValueFromContextSelector, + ]); return null; };