Fix infinite loop critical bug (#12046)

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

View File

@ -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;
};