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

Đang mở Phù hợp với người mới
#8,340 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
68/100
Loại issue
Tài liệu
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react
Lĩnh vực
documentation

Hướng nghiên cứu

Bắt đầu với React 19 Upgrade Guide tại trang được liên kết và tìm phần tài liệu Metadata. Thêm một cảnh báo rõ ràng rằng và không được hỗ trợ cho native hoisting và có thể gây ra vòng lặp vô hạn khi được render bên trong một cây createRoot; hoàn tất khi hạn chế này và rủi ro trình duyệt bị treo đã rõ ràng đối với các nhà phát triển đang di chuyển từ react-helmet.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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>
Ngôn ngữ chính
JavaScript
Star
11.8k
Fork
7.9k
Merge trung bình
16 giờ 6 phút
Pull request đã merge (30 ngày)
7

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của reactjs/react.dev

Tất cả issue của reactjs/react.dev

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.