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:
@ -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;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user