Fix breadcrumb infinite loop (#18561)

`RecordTableNoRecordGroupScrollToPreviousRecordEffect` uses
`useAtomState(lastShowPageRecordIdState)` to read the atom value and
check whether to trigger an effect. Inside `run()`, it calls
`setLastShowPageRecordId(null)` to reset the atom, then`
triggerInitialRecordTableDataLoad()` which fires many `store.set()`
calls on other atoms.

These high-frequency store updates cause the component to re-render
before Jotai's internal useReducer dispatch (propagating the null value)
is processed by React. The result: useAtomState returns a stale non-null
value on every subsequent render, even though the Jotai store already
holds null. The effect re-runs, sees the stale non-null value, calls
`run()` again, creating an infinite loop.

This is a Jotai v2 edge case where useAtom's rendered value desyncs from
the actual store value under high-frequency concurrent updates.

### The fix

Read lastShowPageRecordId directly from the Jotai store via
`store.get()` inside the effect instead of relying on the rendered value
from useAtomState. This guarantees the effect always sees the true store
value and correctly skips when the atom is null.
This commit is contained in:
Thomas Trompette
2026-03-11 18:26:02 +01:00
committed by GitHub
parent f0c83434a7
commit a024a04e01
2 changed files with 16 additions and 13 deletions
@@ -201,8 +201,6 @@ export const useRecordShowPagePagination = (
};
const navigateToIndexView = () => {
setLastShowPageRecordId(objectRecordId);
navigate(
AppPath.RecordIndexPage,
{
@@ -212,6 +210,8 @@ export const useRecordShowPagePagination = (
viewId: viewIdQueryParam,
},
);
setLastShowPageRecordId(objectRecordId);
};
const rankInView = recordIdsInCache.findIndex((id) => id === objectRecordId);
@@ -7,21 +7,19 @@ import { useTriggerFetchPages } from '@/object-record/record-table/virtualizatio
import { useTriggerInitialRecordTableDataLoad } from '@/object-record/record-table/virtualization/hooks/useTriggerInitialRecordTableDataLoad';
import { useScrollWrapperHTMLElement } from '@/ui/utilities/scroll/hooks/useScrollWrapperHTMLElement';
import { useAtomComponentSelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentSelectorValue';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { isNonEmptyString } from '@sniptt/guards';
import { useStore } from 'jotai';
import { useEffect, useState } from 'react';
export const RecordTableNoRecordGroupScrollToPreviousRecordEffect = () => {
const store = useStore();
const { getScrollWrapperElement } = useScrollWrapperHTMLElement();
const allRecordIds = useAtomComponentSelectorValue(
recordIndexAllRecordIdsComponentSelector,
);
const [lastShowPageRecordId, setLastShowPageRecordId] = useAtomState(
lastShowPageRecordIdState,
);
const [hasInitializedScroll, setHasInitializedScroll] = useState(false);
const { scrollTableToPosition } = useScrollTableToPosition();
@@ -34,8 +32,16 @@ export const RecordTableNoRecordGroupScrollToPreviousRecordEffect = () => {
const { triggerFetchPagesWithoutDebounce } = useTriggerFetchPages();
useEffect(() => {
// Read directly from the Jotai store to avoid stale values from useAtom's
// internal useReducer, which can desync under high-frequency store updates.
const lastShowPageRecordId = store.get(lastShowPageRecordIdState.atom);
if (!isNonEmptyString(lastShowPageRecordId)) {
return;
}
const run = async () => {
setLastShowPageRecordId(null);
store.set(lastShowPageRecordIdState.atom, null);
const recordPosition = allRecordIds.findIndex(
(recordId) => recordId === lastShowPageRecordId,
@@ -76,15 +82,12 @@ export const RecordTableNoRecordGroupScrollToPreviousRecordEffect = () => {
await triggerFetchPagesWithoutDebounce();
};
if (isNonEmptyString(lastShowPageRecordId)) {
run();
}
run();
}, [
store,
hasInitializedScroll,
lastShowPageRecordId,
scrollTableToPosition,
allRecordIds,
setLastShowPageRecordId,
triggerInitialRecordTableDataLoad,
processTreadmillScrollTop,
getScrollWrapperElement,