primefaces / primefaces/primereact

DataTable: Custom State Restore causes data to be loaded multiple times when using lazy (remote data)

Open
#6,138 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

Using Custom State management via stateStorage="custom" and customSaveState and customRestoreState causes data to be fetched multiple times when restoring the state when using "lazy" data (fetching data from an external source).

This appears to be caused by the restore state code calling onPage, onSort, onFilter, etc. individually as it is restoring the internal state. As our code (and the provided example) refetches data when onPage, onSort, onFilter, etc. is called, this causes data to be fetched multiple times.

What is worse is that each time the data is fetched, it is fetched with progressively more state information applied.

e.g.

onPage is called - we only know what page to fetch data for.
onSort is called - we now know the page as well as the sorting to fetch data for.
onFilter is called - we now know the page, sorting and filtering criteria to fetch data for.

This gif shows the issue we're seeing - check out the dev console as well (gif taken from the reproducer example):

2024-03-13 16 11 48

Reproducer

https://stackblitz.com/edit/1jn8yc

PrimeReact version

10.5.1

React version

18.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Using the reproducer example:

  1. Navigate to index
  2. Navigate to Data Table
  3. Filter the data table.
  4. Navigate back to index.
  5. Navigate back to Data Table. This will cause Data Table to restore the state and thus demonstrate the issue.
Expected behavior

In the reproducer example, lazyLoading should only be executed after all of the state of the DataTable is restored. How that is achieved, I don't know.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz reproducer and follow the listed navigation and filtering steps while observing the console. Trace custom state restoration for the lazy DataTable and its onPage, onSort, and onFilter callbacks. Done means restoring state triggers lazy loading only after the complete state has been restored, without progressive duplicate fetches.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.