Remix.js React 18 Error: Hydration failed because the initial UI does not match what was rendered on the server.

[emrekardaslar]

Hi Everyone!

I saw some closed issues on this error but I see there is not a definite solution. I created a remix app using the CLI and by default, it set React version to 18. When I tried to add a UI Library I got hydration errors (HTML mismatch) when I ran tests with Cypress. When I downgraded React version to 17 I saw that the tests could run without any errors but the style of components had differences (it is another issue). I also tried the way mentioned here https://github.com/kiliman/remix-hydration-fix and #5244 (comment). This way seemed like working but I feel that it is more like a complicated workaround rather than a solution. I feel like I should continue with React 17 for now but I wanted to ask your opinions on that issue.

• Should I continue with React 17 for now until there is a more proper way or there is already a way for that?
• When I used a UI Library like Ant Design, the CSS seems different when I close JavaScript. I also created a component library using TSDX and CSS modules and imported that library into my project. The styles look buggy on page transitions (just for a moment). Is there a solution to that?

Thanks!

[kiliman]

My "fix" was always meant to be a workaround until React relaxed its hydration process. The problem is you'll always have some issues with the DOM being changed before hydration, so until React can be more forgiving, the "solution" is to hydrate the head and body separately.

Stuff like CSS-in-JS complicates the matter as it tries to modify styles in head but needs to wait for the entire body to render. This makes it harder to do the split hydration.

[shuaixr]

I have solved a similar issue by examining DOM differences and found that the mismatch in DOM was caused by the difference in time zones between the server and the client when serializing dates. This led to the DOM not matching.