fix(site): work around Astro SSR false "Invalid hook call" warnings#600
fix(site): work around Astro SSR false "Invalid hook call" warnings#600
Conversation
Astro's SSR renderer logs false "Invalid hook call" warnings when a React component with hooks returns `null` (withastro/astro#12283). Replace `return null` with `return <></>` in three components: - PreferenceSync (Base layout, every page) - PreferenceUpdater (DocsSidebar, rendered twice per docs page) - TableOfContents (empty headings branch) These three components produced the 3 warnings per docs page request. Verified: 0 warnings after the change. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📦 Bundle Size Report
Total: 38.68 kB · 0 B · 0% Entry BreakdownSubpath sizes are the additional bytes on top of the root entry point, measured by bundling root + subpath together and subtracting the root-only size.
|
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
. |
3.10 kB | 3.10 kB | 0 B | 0% | ✅ |
./dom |
2.58 kB | 2.58 kB | 0 B | 0% | ✅ |
| total | 5.68 kB | 5.68 kB | 0 B | 0% |
@videojs/element
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
. |
817 B | 817 B | 0 B | 0% | ✅ |
./context |
823 B | 823 B | 0 B | 0% | ✅ |
| total | 1.60 kB | 1.60 kB | 0 B | 0% |
@videojs/icons
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
./react |
2.10 kB | 2.10 kB | 0 B | 0% | ✅ |
./html |
1.37 kB | 1.37 kB | 0 B | 0% | ✅ |
| total | 3.46 kB | 3.46 kB | 0 B | 0% |
@videojs/react
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
. |
7.69 kB | 7.69 kB | 0 B | 0% | ✅ |
./audio |
266 B | 266 B | 0 B | 0% | ✅ |
./background |
268 B | 268 B | 0 B | 0% | ✅ |
./video |
6.69 kB | 6.69 kB | 0 B | 0% | ✅ |
| total | 14.89 kB | 14.89 kB | 0 B | 0% |
@videojs/store
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
. |
1.29 kB | 1.29 kB | 0 B | 0% | ✅ |
./html |
468 B | 468 B | 0 B | 0% | ✅ |
./react |
199 B | 199 B | 0 B | 0% | ✅ |
| total | 1.94 kB | 1.94 kB | 0 B | 0% |
@videojs/utils
| Entry | Base | PR | Diff | % | |
|---|---|---|---|---|---|
./array |
104 B | 104 B | 0 B | 0% | ✅ |
./dom |
684 B | 684 B | 0 B | 0% | ✅ |
./events |
227 B | 227 B | 0 B | 0% | ✅ |
./function |
197 B | 197 B | 0 B | 0% | ✅ |
./object |
119 B | 119 B | 0 B | 0% | ✅ |
./predicate |
265 B | 265 B | 0 B | 0% | ✅ |
./string |
110 B | 110 B | 0 B | 0% | ✅ |
./style |
185 B | 185 B | 0 B | 0% | ✅ |
./time |
478 B | 478 B | 0 B | 0% | ✅ |
./number |
158 B | 158 B | 0 B | 0% | ✅ |
| total | 2.47 kB | 2.47 kB | 0 B | 0% |
ℹ️ How to interpret
Sizes are minified + brotli, measured with esbuild.
Package totals are computed as root size + marginal subpath costs.
Subpath marginal cost = (root + subpath bundled together) − root alone.
| Icon | Meaning |
|---|---|
| ✅ | No change |
| 🔺 | Increased ≤ 10% |
| 🔴 | Increased > 10% |
| 🔽 | Decreased |
| 🆕 | New (no baseline) |
Run pnpm size locally to check current sizes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
| return null; | ||
| // Workaround: Astro SSR logs false "Invalid hook call" when a React | ||
| // component with hooks returns null. See withastro/astro#12283. | ||
| return <></>; |
There was a problem hiding this comment.
This feels like a bug with Astro, null is valid. You may need to add a comment to get Biome to ignore this?
There was a problem hiding this comment.
Oh yeah totally a bug with Astro. I didn't notice Biome was warning about it though. Thanks for the heads up!
There was a problem hiding this comment.
Ah maybe Biome is cool with it now. I think I originally switched it to null as it (or maybe ESLint back then) was complaining.
There was a problem hiding this comment.
I've been seeing these rule of hooks errors for AGES. I don't think you exclusively started this? (#597 was happening, too, so, who knows)
2 participants
Summary
return nullwithreturn <></>in three React components that trigger false SSR warningsProblem
Astro's SSR renderer logs false "Invalid hook call" warnings when a React component with hooks returns
nullinstead of JSX. Three components were affected, producing 3 warnings per docs page request:PreferenceSync— rendered once per page (Base layout)PreferenceUpdater— rendered twice per docs page (DocsSidebar in desktop + mobile)TableOfContents— when heading list is emptyHow we confirmed
return null→return <></>in PreferenceSync dropped errors from 3 → 2Test plan
pnpm -F site test— 244 tests passpnpm dev:site— 0 "Invalid hook call" warnings on guide and reference pagesCloses #596
🤖 Generated with Claude Code