fix(useTextDirection): read the document direction on the first render - #230
Merged
childrentime merged 1 commit intoSep 17, 2026
Merged
Conversation
`initialValue` was destructured with a default of `'ltr'`, so the `initialValue !== undefined` guard was always true and the branch that reads the element's `dir` attribute could never run. On a document with `dir="rtl"` the hook rendered `ltr` first and only corrected after the effect, and the server-side warning behind the same guard was dead code. The document now wins, with `initialValue` and then `'ltr'` as fallbacks, which is also what the unreachable branch was written to do. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
childrentime
approved these changes
Sep 17, 2026
childrentime
left a comment
Owner
There was a problem hiding this comment.
Verified locally: reverting only index.ts fails exactly the two specs that pin the new behaviour, and the SSR path now emits the warning it was always meant to. Thanks!
childrentime
added a commit
that referenced
this pull request
Sep 17, 2026
Since #230 the target element's `dir` wins over `initialValue`, so the option is a fallback used only when the element carries no `dir` — not the initial value the table still described. Regenerated through `gend`. The notes also cover the consequence for server rendering: the client reads the element on its first render, so an app that server-renders has to pass an `initialValue` matching its markup, or the two disagree and React reports a hydration mismatch. The hook warns about exactly this again now that #230 made the warning reachable. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
useTextDirectiondestructuresinitialValuewith a default:Because of the default,
initialValue !== undefinedis always true, so the branch that reads the element'sdirand the SSR warning below it are both unreachable.The effect corrects the value after mount, so what is left is a wrong first render. Recording the value on every render, on a document with
dir="rtl":That is a flash on the client and, under SSR, markup that says
ltrfor an RTL document — which is the mismatch the dead warning was written to prevent.Now the document wins, falling back to
initialValueand then'ltr', which is what the unreachable branch already did and matches VueUse'suseTextDirection.initialValuestill defaults to'ltr'in effect, so nothing changes for a document that sets nodir.Type of Change
Checklist
The hook had no spec; this adds five. Mutation check: reverting only
index.tsfails exactly the two that pin the new behaviour (first render on an RTL document, and document-over-initialValue), while the three that describe unchanged behaviour stay green.jest427 passing,eslintclean,tsc --noEmitclean. Nointerface.tschange, so no docs regeneration —@defaultValue 'ltr'is still accurate, it is now the fallback when the element carries nodir.The diff was written by Claude Opus 5 in Claude Code under my direction; I have not read it line by line myself yet, so that box stays unticked until I have.
🤖 Generated with Claude Code