Provide a hook for hydration mismatch (__DEV__ only) or a way to customize `handleMismatch`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 54.4k
- Forks
- 9.2k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 140
Description
What problem does this feature solve?
Hi 👋
I'm currently working on a module to improve DX for nuxt, its main goal is to help devs with hydration.
Currently, when a hydration mismatch happens, we don't really have any idea of why it is happening (except having a string logged in console).
What i'd like to do is to have a hook that can be triggered with informations about what went wrong, the parentComponent , the vnode and DOM element could be provided.
What does the proposed API look like?
I think a onHydrationMismatch() function that could be a __DEV__ only hook would be nice to have.
Or
just being able to customize the handleMismatch() function of createHydrationFunctions()
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading packages/runtime-core/src/hydration.ts, especially createHydrationFunctions() and handleMismatch(). Determine how a DEV-only onHydrationMismatch hook or a customizable handleMismatch would expose the parentComponent, vnode, and DOM element; done means the selected API is specified and implemented with coverage for hydration mismatches.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100