Page flickers on React 19 when hydration error
Hey guys,
I am trying to implement a theme switcher in my tanstack start project but I have hit a bug. When I do a page refresh, with a hydration error, the entire page flickers. This bug only happens with react 19 weirdly enough. With react 18 the page does't flicker at all.
This is problably a skill issue on my end, does anyone know how to fix this ? I have also attached a video that shows this bug. When I refresh with the system theme selected, the page does not flicker as there is no hydration missmatch. But if I refresh with the light / dark mode selected, the full page refreshes as there is a hydration missmatch. Would love to get any help with it
here is a reproduction here
I am trying to implement a theme switcher in my tanstack start project but I have hit a bug. When I do a page refresh, with a hydration error, the entire page flickers. This bug only happens with react 19 weirdly enough. With react 18 the page does't flicker at all.
This is problably a skill issue on my end, does anyone know how to fix this ? I have also attached a video that shows this bug. When I refresh with the system theme selected, the page does not flicker as there is no hydration missmatch. But if I refresh with the light / dark mode selected, the full page refreshes as there is a hydration missmatch. Would love to get any help with it
here is a reproduction here
StackBlitz
Run official live example code for Router Start Counter, created by Tanstack on StackBlitz
