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
StackBlitz
Router Start Counter Example - StackBlitz
Run official live example code for Router Start Counter, created by Tanstack on StackBlitz
4 Replies
rising-crimson•8mo ago
Maybe is a chrome extension causinh this? Try incognito. If this is flickering due to styling, use style url in the head inside your root router.
adverse-sapphireOP•8mo ago
Hey thanks for the help, yes I have tried in incognito and the bug is still there. This bug only happens in react 19, if i downgrade react to 18 in the sandbox above the bug disappears 🥲 So I don't know if it's a react problem or a tanstack start problem.
fair-rose•8mo ago
With react 19 we are getting
JSON.parse(undefined) error that I think is linked to the head. I think this could be causing the flicker. So I have downgraded to 18. https://discord.com/channels/719702312431386674/1325650337658572862
Are you using nekochan's implementation of theme provider?adverse-sapphireOP•8mo ago
I had a look and it's similar to nekochan's implementation