fix(FR-1446): refactor useDeferredQueryParams

[yomybaby]

Fix Query Parameter State Management and Persistence

Resolves #4251 (FR-1446)

Summary

This PR fixes the state persistence issue in the query parameters hook where pagination and filter values were not persisting correctly after page refresh, and addresses cross-page state pollution issues.

Problem

Users experienced issues where:

• Pagination and filter values would revert to initial state after page refresh
• Global state was shared between different pages causing state pollution
• Memory leak concerns with atom lifecycle management

Solution

1. Refactored State Management: Changed from global atom to page-specific state management
2. Fixed State Persistence: URL query params now serve as initial values, with internal state maintaining values during navigation
3. Resolved Cross-Page Issues: Each page now has independent query parameter state that resets when navigating to a different page
4. Improved Naming: Renamed useDeferredQueryParams to useTransitionSafeQueryParams to better reflect its purpose of handling React transitions safely
5. Memory Management: Proper atom lifecycle management prevents memory leaks

Technical Implementation

• Uses page-scoped atoms that automatically reset when pathname changes
• URL query parameters serve as initial values only
• Internal state manages subsequent updates and synchronizes with URL
• Compatible with React transitions and concurrent rendering
• Same page components can share state, but different pages are isolated

Files Changed

• react/src/hooks/useDeferredQueryParams.tsx (deleted)
• react/src/hooks/useTransitionSafeQueryParams.tsx (new implementation)
• Updated imports in 5 component files

Testing

• Lint checks pass
• Pagination values persist after page refresh
• Filter values persist after page refresh
• No cross-page state pollution
• Memory usage remains stable during navigation

[yomybaby]

• fix(FR-1446): refactor useDeferredQueryParams #4229 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	4.59% (-0% 🔻)	501/10916
🔴	Branches	3.7% (+0% 🔼)	285/7697
🔴	Functions	2.62% (+0% 🔼)	90/3434
🔴	Lines	4.56% (-0% 🔻)	487/10688

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / useTransitionSafeQueryParams.tsx	3.03%	0%	0%	3.13%

Test suite run success

114 tests passing in 13 suites.

Report generated by 🧪jest coverage report action from 2b72266

[Copilot]

Pull Request Overview

This PR fixes state persistence issues in query parameters by replacing the global useDeferredQueryParams hook with a new page-scoped useTransitionSafeQueryParams hook. The changes prevent cross-page state pollution and ensure pagination/filter values persist correctly after page refresh.

Key changes:

• Replaced global state management with page-specific state isolation
• Renamed hook to better reflect its purpose of handling React transitions safely
• Added proper atom lifecycle management to prevent memory leaks

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
react/src/hooks/useTransitionSafeQueryParams.tsx	New implementation with page-scoped state management and context provider
react/src/hooks/useDeferredQueryParams.tsx	Removed old global state implementation
react/src/App.tsx	Added PageQueryParamAtomProvider wrapper for proper state isolation
react/src/pages/*.tsx	Updated imports to use new hook name across 3 page components
react/src/components/AgentSummaryList.tsx	Updated import to use new hook name
react/src/hooks/reactPaginationQueryOptions.tsx	Updated import to use new hook name

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The hasLoadedFromURL variable is declared inside the useMemo callback but shared across re-renders. This will cause the variable to reset on every render, making the URL loading logic unreliable. Move this variable outside the useMemo or use a ref to maintain its state across renders.

Suggested change

	// Create page-specific atoms that reset when pagePath changes
	const localQueryParamsAtom = useMemo(() => {
	// Internal state atom for this specific page
	let hasLoadedFromURL = false;
	// Derived atom that manages the query parameters
	const queryParamsAtom = atomWithDefault((get) => {
	const pageQueryParamDelta = get(pageQueryParamDeltaAtom);
	// Use URL query params on first access, then use internal state
	if (!hasLoadedFromURL) {
	hasLoadedFromURL = true;
	// Persist flag across renders and atom invocations
	const hasLoadedFromURLRef = useRef(false);
	// Create page-specific atoms that reset when pagePath changes
	const localQueryParamsAtom = useMemo(() => {
	// Derived atom that manages the query parameters
	const queryParamsAtom = atomWithDefault((get) => {
	const pageQueryParamDelta = get(pageQueryParamDeltaAtom);
	// Use URL query params on first access, then use internal state
	if (!hasLoadedFromURLRef.current) {
	hasLoadedFromURLRef.current = true;

[nowgnuesLee]

I share the same curiosity as this review.

[yomybaby]

The review is incorrect. The hasLoadedFromURL variable is intentionally designed to reset when useMemo creates a new atom instance. This ensures each atom gets proper initial URL loading, then switches to using pageQueryParamDelta. Moving it outside would break this intended behavior - it's a feature, not a bug.

[yomybaby]

Simplified the implementation by removing the hasLoadedFromURL logic entirely. The hook now directly merges query with pageQueryParamDelta, making the original review concern obsolete.

[Copilot]

The context default value should not be undefined as it creates potential runtime errors. Consider providing a proper default atom or throwing an error in the context creation to make the contract clearer.

Suggested change

	const PageQueryParamDeltaAtomContext = createContext<
	PrimitiveAtom<Record<string, any>> | undefined
	>(undefined);
	const PageQueryParamDeltaAtomContext = createContext<PrimitiveAtom<Record<string, any>>>(
	atom(() => {
	throw new Error(
	'PageQueryParamDeltaAtomContext must be used within <PageQueryParamAtomProvider>'
	);
	})
	);

[nowgnuesLee]

I share the same curiosity as this review.

[nowgnuesLee]

Suggested change

	throw new Error(
	'usePageQueryParamDeltaAtom must be used within <PageQueryParamAtomP44rovider>',
	throw new Error(
	'usePageQueryParamDeltaAtom must be used within <PageQueryParamAtomProvider>',