[Suggestion]: Clarify restrictions on rendering <html> and <body> tags inside the component tree to prevent infinite loops in React 19

Open Beginner friendly
#8,340 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Documentation
Clarity
Clearly specified
Activity status
Quiet
Tech stack
react
Domain
documentation

Research direction

Start with the React 19 Upgrade Guide at the linked page and locate the Metadata documentation section. Add an explicit warning that and are not supported for native hoisting and can cause an infinite loop when rendered inside a createRoot tree; done means the restriction and browser-freeze risk are clear to developers migrating from react-helmet.

Written by the indexing model from the issue text.

Description

type: documentation
Summary

Add an explicit warning to the React 19 Upgrade Guide and Metadata documentation stating that <html> and <body> tags are not supported for native hoisting. Clarify that rendering these tags inside a createRoot tree causes a terminal infinite loop (browser freeze) during event propagation (e.g., input focus), especially since many developers are currently migrating away from react-helmet to React 19's native metadata handling.

Page

https://react.dev/blog/2024/04/25/react-19-upgrade-guide

Details

In React 19, rendering an <html> or <body> tag within a custom component tree (nested under a createRoot container) causes a critical browser freeze (100% CPU usage) due to this issue#35480.

I encountered this issue while refactoring an existing application to remove the react-helmet dependency. With the introduction of Metadata Hoisting, it seemed logical to replace library-managed tags with native JSX tags. However, while React 19 successfully hoists <title>, <meta>, and <link>, it fails to handle <html> or <body> in the same way. Instead of a warning or a graceful fallback, it results in a terminal infinite loop during event propagation (e.g., when clicking an input).

For example, I replaced my existing react-helmet logic with a direct JSX tag, expecting React to manage the lang attribute:

// This refactoring caused the terminal hang:
<Wrap>
  {/* I moved this out of <Helmet> thinking it was now supported natively */}
  <html lang={locale} /> 
  
  <Content>{children}</Content>
</Wrap>
Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
16h 6m
Merged PRs (30d)
7

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from reactjs/react.dev

All issues in reactjs/react.dev

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.