| name | wsh-react-mount |
| description | Fixing React mount timing in WSH 2026 — changing from window.load to DOMContentLoaded for earlier hydration. |
WSH: React Mount Timing
The app delays React mounting until window.load, which fires only after ALL resources (images, fonts, scripts, stylesheets) are fully loaded. This adds seconds to FCP/LCP.
Use this skill when fixing the React mount event listener.
Technique
window.addEventListener("load", () => {
createRoot(document.getElementById("app")!).render(...);
});
document.addEventListener("DOMContentLoaded", () => {
createRoot(document.getElementById("app")!).render(...);
});
createRoot(document.getElementById("app")!).render(...);
Impact: FCP -2-5s, LCP -2-5s, SI improvement
Pitfalls
| Pitfall | Symptom | Fix |
|---|
| #app div not in DOM yet | null reference error | Use DOMContentLoaded or defer |
| Script loaded before DOM parsed | Mount fails | Ensure script is deferred or use DOMContentLoaded |
VRT Risks
| Change | Visual Impact | Mitigation |
|---|
| Earlier mount | Content appears sooner | No visual change, only timing |
Project-Specific Notes
- Entry:
application/client/src/index.tsx
- HTML template:
application/client/src/index.html
- Script tag:
<script src="/scripts/main.js"></script> (no defer/async)
- The
<div id="app"></div> is in the body, script is in head
- Best approach: add
defer to script tag AND use DOMContentLoaded
