-
Notifications
You must be signed in to change notification settings - Fork 26.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Stale values returned from useOptimistic when state changes #57662
Comments
It doesn't,t look like you're using the useOptimistic hook correctly there. (But keep in mind, last time I personally used it it was still experimental) Maybe try to create a setup just like the official docs show. https://react.dev/reference/react/useOptimistic Ps. This is might be better suited in the react repo rather than the Next.js one |
Thanks for the reply @JesseKoldewijn! const [optimisticArr] = useOptimistic(arrFromServer, (s) => s); My example intentionally does not use the callback returned from Without a form submission in progress |
I will have to dig in on the exact behaviour of the useOptimistic hook again but I'll have a look for ya later today👍 |
I think this might indeed be a bug in React. Looking at the code for It appears that when both queues are null ( I'll open a bug report in the React repo. |
Opened the bug report |
This issue has been fixed in React |
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Link to the code that reproduces this issue
https://github.com/dorshinar/next-optimistic-bug
To Reproduce
npm run dev
useEffect
setting the stateTo illustrate the bug I have a state variable called
![Screenshot 2023-10-28 at 12 37 32](https://private-user-images.githubusercontent.com/17943918/278804221-79eae613-e6ae-412f-9f84-ff7687d78cc8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg4MjI5OTgsIm5iZiI6MTcxODgyMjY5OCwicGF0aCI6Ii8xNzk0MzkxOC8yNzg4MDQyMjEtNzllYWU2MTMtZTZhZS00MTJmLTlmODQtZmY3Njg3ZDc4Y2M4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjE5VDE4NDQ1OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFiZWU0OTkyNzgxY2RiNTc5ZTcwMGUxNjBlNzU5NGM2Nzk4YmMxZWE5N2U4ZGUzOGQ0ZjA5NzkzMWU5NDQxOTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.QHRahHKoFLxkAlvJgvbn7SLaKX3oWsa9oXHqHLgsVVo)
arrFromServer
in the<Form />
component, and I am passing it throughuseOptimistic
as if I was updating data fetched from the server optimistically.The
arrFromServer
in a placeholder for data fetched from a Server Component, and theuseEffect
is a way to simulate updating the data on the server and refetching it.In the image below, the
optimisticArr
remains constant with 3 elements, whilearrFromServer
grows in an intervalCurrent vs. Expected behavior
I expect
useOptimistic
to return the up-to-datestate
passed as parameter while a mutation is not in-flight. The current behavior seems to return the initialstate
provided touseOptimistic
.Verify canary release
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000 Binaries: Node: 20.7.0 npm: 10.1.0 Yarn: 1.22.19 pnpm: 8.9.2 Relevant Packages: next: 14.0.1-canary.1 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0 typescript: 5.1.3 Next.js Config: output: N/A
Which area(s) are affected? (Select all that apply)
Data fetching (gS(S)P, getInitialProps)
Additional context
No response
The text was updated successfully, but these errors were encountered: