remix-run / react-router

Declarative routing for React
https://reactrouter.com
MIT License
53.02k stars 10.3k forks source link

[Bug]: `revalidate` (from `useRevalidator` hook) causes page twitching effect while scrolling the page with `<ScrollRestoration />` component #12157

Open DimaAmega opened 4 days ago

DimaAmega commented 4 days ago

What version of React Router are you using?

6.27.0

Steps to Reproduce

Actually i was trying to setup page with long table (like scrollable page) that constantly refresh data from loader every n ms/s by calling revalidate(). It works, but using revalidate with <ScrollRestoration /> while scrolling the page causes page twitching. Without <ScrollRestoration /> component on the page everything is working fine, so i believe this is the bug

Minimal example here: https://stackblitz.com/edit/vitejs-vite-go7kak?file=src%2Fmain.tsx

Expected Behavior

https://github.com/user-attachments/assets/e89b2b38-aa3a-4799-abb8-c3a5dd53d7b2

Actual Behavior

https://github.com/user-attachments/assets/d3396ba7-6f7b-4314-b301-bf285078ab7d

DimaAmega commented 3 days ago

My attempt to fix #12159