Skip to content

fix(focus): eliminate focus flash on mount by registering nodes during render#64

Merged
zion-off merged 1 commit intomainfrom
fix-use-effect-lag
Mar 1, 2026
Merged

fix(focus): eliminate focus flash on mount by registering nodes during render#64
zion-off merged 1 commit intomainfrom
fix-use-effect-lag

Conversation

@zion-off
Copy link
Copy Markdown
Owner

@zion-off zion-off commented Mar 1, 2026

Move node registration from useEffect to the render phase so that useSyncExternalStore's getSnapshot returns the correct hasFocus value on the first render. This eliminates the visible one-frame lag when opening collapsible sections or returning to router screens.

  • Register nodes silently during render (no subscriber notifications)
  • Flush deferred notifications in useLayoutEffect before paint
  • Extract passive-clearing into a shared helper for both silent and normal focus transitions
  • Track focusKey on FocusNode to handle key changes without destroying the node's children
  • Re-register in useLayoutEffect setup for React Strict Mode compatibility

…g render

Move node registration from useEffect to the render phase so that
useSyncExternalStore's getSnapshot returns the correct hasFocus value
on the first render. This eliminates the visible one-frame lag when
opening collapsible sections or returning to router screens.

- Register nodes silently during render (no subscriber notifications)
- Flush deferred notifications in useLayoutEffect before paint
- Extract passive-clearing into a shared helper for both silent and
  normal focus transitions
- Track focusKey on FocusNode to handle key changes without destroying
  the node's children
- Re-register in useLayoutEffect setup for React Strict Mode compat
@zion-off zion-off merged commit ea058cb into main Mar 1, 2026
1 check passed
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.

1 participant