Infinite loop in React's event system requires deep DOM/React integration knowledge.
The issue describes an infinite loop when focusing inputs inside nested body tags, indicating a React DOM synchronization problem. This requires understanding React's event system and DOM handling internals. The reproduction is clear but the fix would touch core React behavior with potential wide impacts.
React v19 freezes the browser (99% CPU) via an infinite event loop when focusing input elements inside nested body tags. Unlike React v15, which remained stable under the same malformed structure, the modern version fails to handle this DOM desynchronization, showing a significant decline in fault tolerance.
React version: 19.2.0
Create a new React application using Vite or Create React App (CRA).
Replace the contents of main.tsx (Vite) or index.tsx (CRA) with the reproduction code provided below.
Run the application in development mode (e.g., npm run dev) or build and serve the production build.
Open the application in a browser (Chrome or Firefox) and focus on the input or textarea element.
Observe that an infinite loop is triggered immediately upon focus, causing the browser tab to hang or freeze completely.
Link to code example:
import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render(
<body>
<input type="text" />
</body>
);
Problem Scenario:
Invalid HTML Generation: Writing a body tag inside a React component genera
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!