[Suggestion]: Clarify restrictions on rendering <html> and <body> tags inside the component tree to prevent infinite loops in React 19
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 11.8k
- Forks
- 7.9k
- Ø Merge
- 1 T. 11 Std.
- Gemergte PRs (30 T.)
- 11
Beschreibung
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>
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginnen Sie mit dem React 19 Upgrade Guide auf der verlinkten Seite und suchen Sie den Abschnitt zur Metadata-Dokumentation. Fügen Sie einen ausdrücklichen Warnhinweis hinzu, dass und für native hoisting nicht unterstützt werden und beim Rendern innerhalb eines createRoot-Baums eine Endlosschleife verursachen können; fertig ist es, wenn die Einschränkung und das Risiko eines Einfrierens des Browsers für Entwickler, die von react-helmet migrieren, klar sind.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react
- Bereich
- documentation
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Ruhig
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 68/100