[Suggestion]: Clarify restrictions on rendering <html> and <body> tags inside the component tree to prevent infinite loops in React 19
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 11.8k
- Forks
- 7.9k
- Merge medio
- 1 d 11 h
- PR fusionados (30 d)
- 11
Descripción
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>
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con la React 19 Upgrade Guide en la página enlazada y localiza la sección de documentación de Metadata. Añade una advertencia explícita de que y no son compatibles con native hoisting y pueden provocar un bucle infinito cuando se renderizan dentro de un árbol de createRoot; se considerará terminado cuando la restricción y el riesgo de bloqueo del navegador sean claros para los desarrolladores que migran desde react-helmet.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react
- Área
- documentation
- Tipo de issue
- Documentación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Estado de actividad
- Tranquilo
- Claridad
- Bien especificado
- Aptitud para principiantes
- 68/100