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

Fix infinite loop critical bug (#12046)

Browse Source 
This PR fixes an infinite loop than happens due to a useEffect in a non
deterministic manner.

The fix is to put a `isDeeplyEqual()` to avoid re-rendering the
useEffect if the value is the same.

Fixes : https://github.com/twentyhq/core-team-issues/issues/957
This commit is contained in:
Lucas Bordeau
2025-05-14 17:40:05 +02:00
committed by GitHub
parent 929f7876de
commit 628ba18115
1 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/twenty-front/src/modules/object-record/record-store/components/RecordValueSetterEffect.tsx
View File

@ -1,18 +1,33 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useRecoilValue } from 'recoil'; 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 { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
// TODO: should be optimized and put higher up // TODO: should be optimized and put higher up
export const RecordValueSetterEffect = ({ recordId }: { recordId: string }) => { 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(() => { useEffect(() => {
setRecordValue(recordId, recordValue); if (!isDeeplyEqual(recordValueFromContextSelector, recordValueFromRecoil)) {
}, [setRecordValue, recordValue, recordId]); setRecordValueInContextSelector(recordId, recordValueFromRecoil);
}
}, [
setRecordValueInContextSelector,
recordValueFromRecoil,
recordId,
recordValueFromContextSelector,
]);
return null; return null;
}; };