[Suggestion]: Clarify restrictions on rendering <html> and <body> tags inside the component tree to prevent infinite loops in React 19
Ninguém assumiu esta issue ainda.
- Linguagem predominante
- JavaScript
- Estrelas
- 11.8k
- Forks
- 7.9k
- Merge médio
- 1d 11h
- PRs com merge (30d)
- 11
Descrição
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>
Guia de contribuição
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Direção de pesquisa
Comece pelo React 19 Upgrade Guide na página vinculada e localize a seção de documentação de Metadata. Adicione um aviso explícito de que e não são compatíveis com native hoisting e podem causar um loop infinito quando renderizados dentro de uma árvore createRoot; considera-se concluído quando a restrição e o risco de congelamento do navegador estiverem claros para os desenvolvedores que estão migrando do react-helmet.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- react
- Domínio
- documentation
- Tipo de issue
- Documentação
- Dificuldade
- 2/5
- Tempo estimado
- 1-3 horas
- Status de atividade
- Pouca atividade
- Clareza
- Claramente especificada
- Facilidade para iniciantes
- 68/100