Skip to content

Fix: Improve <Html> functional purity#54

Open
cadenceblorbo wants to merge 3 commits intopmndrs:mainfrom
cadenceblorbo:html-side-effect-removal
Open

Fix: Improve <Html> functional purity#54
cadenceblorbo wants to merge 3 commits intopmndrs:mainfrom
cadenceblorbo:html-side-effect-removal

Conversation

@cadenceblorbo
Copy link
Copy Markdown

@cadenceblorbo cadenceblorbo commented Mar 9, 2026

Currently, when using React's <StrictMode>, ReactDOM.createRoot() is called twice on the same root. This indicates an issue with functional purity. In addition, when <A11y> components are removed from the React tree, updates to the removed root may be attempted.

These changes are based on the most up-to-date drei Html component, and are likely to fix Issue 53.

  • Change UseEffect to UseLayoutEffect:

    • This change ensures that render() isn't called on an unmounted root.
  • Move root creation into UseLayoutEffect and store root using useRef():

    • This change ensures that createRoot() isn't called multiple times on an already mounted container.
  • Small syntax/depreciated changes:

    • Adds type prefix to Assign import.
    • Changes depreciated MutableRefObject type to RefObject.
    • Condenses useThree() hooks.
    • Removes unused size effect dependency.

    EDIT: the type keyword was removed and the value passed into root's useRef() was changed to null! in order to support the software running on CodeSandbox.

-Change UseEffect to UseLayoutEffect
-Move root creation into UseLayoutEffect
-Small syntax/depreciated fixes
@cadenceblorbo cadenceblorbo changed the title Improve HTML functional purity Improve <Html> functional purity Mar 9, 2026
@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Mar 9, 2026

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@cadenceblorbo cadenceblorbo changed the title Improve <Html> functional purity Fis: Improve <Html> functional purity Mar 10, 2026
@cadenceblorbo cadenceblorbo changed the title Fis: Improve <Html> functional purity Fix: Improve <Html> functional purity Mar 10, 2026
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.

Next js and @react-three/a11y issues

1 participant