primefaces / primefaces/primereact
DataTable: Custom State Restore causes data to be loaded multiple times when using lazy (remote data)
Nobody has claimed this yet.
- 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):
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:
- Navigate to index
- Navigate to Data Table
- Filter the data table.
- Navigate back to index.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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