Choose between route.params merge:true and global state for paginated lists in React Navigation

The Recommendation

For paginated lists that require deep-linking support and high performance, use a hybrid approach: store the pagination index (page, limit) in route.params and the actual dataset in a global state (e.g., Zustand, Redux, or a cached React Context).

Using merge: true is sufficient for updating the page index without wiping other parameters, but storing the resulting large dataset in the navigation state will degrade performance and complicate state serialization.

Technical Comparison

Route Params with merge:true

In React Navigation v6+, navigation.navigate('Route', { page: 2 }, { merge: true }) ensures that other existing params remain intact. This is the most efficient way to handle deep-linking because the URL or navigation state directly reflects the current page.

• Pros: Native support for deep links; simple state transitions.
• Cons: Rapid navigations can trigger frequent re-renders of the entire screen if the component is not optimized; navigation state becomes bloated if used to store the actual list items.

Global State Management

Global state decouples the data from the navigation lifecycle. This prevents the "large object clone" issue because the navigation state only holds a reference (the page number), while the heavy data resides in a dedicated store.

• Pros: Eliminates redundant API calls when navigating back and forth; allows for fine-grained re-render control using selectors.
• Cons: Requires manual synchronization (e.g., using useFocusEffect) to ensure the store matches the current route params upon deep-link entry.

Implementation Strategy

1. Navigation: Use navigation.navigate with merge: true to update the page parameter.
2. Data Fetching: In the screen component, use the route.params.page as a dependency for your data fetcher.
3. Caching: Store the fetched results in a global store keyed by the page number (e.g., state.pages[page]).
4. Optimization: Wrap list items in React.memo. Since the global store only updates the specific page slice, the list component will only re-render when the data for that specific page changes, regardless of navigation state updates.

Verification Command

To verify if your navigation state is becoming bloated, log the state in your root navigator:

console.log(navigation.getState());

Assumptions and Uncertainty

This recommendation assumes you are using React Navigation v6 or later. If you are on an older version, merge: true is unavailable, and you must manually spread existing params using navigation.setParams. There is uncertainty regarding the exact re-render frequency without knowing your specific store implementation (e.g., Redux vs. Context), but selectors in Zustand or Redux typically outperform Context for large datasets.

Missing Diagnostic: Are you utilizing a caching library like TanStack Query (React Query)? If so, the need for a manual global store is eliminated, as the library handles the cache keyed by the route params automatically.