[Suggestion]: Clarify restrictions on rendering <html> and <body> tags inside the component tree to prevent infinite loops in React 19
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 11.8k
- Forks
- 7.9k
- Merge moyen
- 1 j 11 h
- PR mergées (30 j)
- 11
Description
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>
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par consulter le React 19 Upgrade Guide sur la page liée et repérez la section de documentation Metadata. Ajoutez un avertissement explicite indiquant que et ne sont pas pris en charge par native hoisting et peuvent provoquer une boucle infinie lorsqu’ils sont rendus dans un arbre createRoot ; le travail est terminé lorsque la restriction et le risque de gel du navigateur sont clairs pour les développeurs qui migrent depuis react-helmet.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react
- Domaine
- documentation
- Type d'issue
- Documentation
- Difficulté
- 2/5
- Temps estimé
- 1-3 heures
- Activité
- Calme
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 68/100