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

Abierto Apto para principiantes
#8,340 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
68/100
Tipo de issue
Documentación
Claridad
Bien especificado
Estado de actividad
Tranquilo
Stack tecnológico
react
Área
documentation

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.

Descripción

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>
Lenguaje dominante
JavaScript
Estrellas
11.8k
Forks
7.9k
Merge medio
16 h 6 min
PR fusionados (30 d)
7

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de reactjs/react.dev

Todos los issues de reactjs/react.dev

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.