Skip to content

fix(ssr): use useId for hydration and remove the need for resetServerContext (React 18+)#439

Merged
100terres merged 3 commits intomainfrom
pr/430
Nov 26, 2022
Merged

fix(ssr): use useId for hydration and remove the need for resetServerContext (React 18+)#439
100terres merged 3 commits intomainfrom
pr/430

Conversation

@100terres
Copy link
Copy Markdown
Collaborator

Thank you @klarstrup for opening this PR: #430. I wasn't able to edit the original PR, so I've re-opened it here.

The following is the original PR description

This fixes hydration errors of the sort:

Warning: Prop `aria-describedby` did not match. Server: "rfd-hidden-text-1-hidden-text-8" Client: "rfd-hidden-text-1-hidden-text-1"

Even with proper usage of resetServerContext(), this error can crop up when doing sufficiently concurrent SSR.

It also adds a warning for when resetServerContext is called unnecessarily.


Following the addition of React 18 support the resettable hacky increment-only IDs can be dropped in favor of the first party useId() API (details: https://reactjs.org/docs/hooks-reference.html#useid)

This should not be a breaking change per se but the new IDs could result in broken snapshot tests among consumers, as indeed it did here.

@vercel
Copy link
Copy Markdown

vercel bot commented Nov 26, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
dnd ✅ Ready (Inspect) Visit Preview Nov 26, 2022 at 5:50PM (UTC)

@100terres 100terres changed the title feat/fix(ssr): Fix hydration errors, remove need for resetServerContext when useId is available (i.e. React 18+) fix(ssr): use useId for hydration and remove the need for resetServerContext (React 18+) Nov 26, 2022
@100terres 100terres merged commit bcb66d3 into main Nov 26, 2022
@100terres 100terres deleted the pr/430 branch November 26, 2022 18:01
@klarstrup
Copy link
Copy Markdown
Contributor

Thank you for bringing this in 😊 now I can kill my fork and get back to the main package

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants