[Suggestion]: Clarify restrictions on rendering <html> and <body> tags inside the component tree to prevent infinite loops in React 19
Nessuno ha ancora preso questa issue.
- Lingua principale
- JavaScript
- Stelle
- 11.8k
- Fork
- 7.9k
- Merge medio
- 1g 11h
- PR unite (30g)
- 11
Descrizione
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>
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia con la React 19 Upgrade Guide nella pagina collegata e individua la sezione della documentazione Metadata. Aggiungi un avviso esplicito che indichi che e non sono supportati da native hoisting e possono causare un ciclo infinito quando vengono renderizzati all’interno di un albero createRoot; il lavoro è completo quando la limitazione e il rischio di blocco del browser sono chiari agli sviluppatori che eseguono la migrazione da react-helmet.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react
- Ambito
- documentation
- Tipo di issue
- Documentazione
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Stato di attività
- Tranquilla
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 68/100