← gitpulse
Merged
Size
S
Change Breakdown
Bug Fix75%
Refactoring25%
#57fix(site): hoist PR side-panel effect into open-only child

Side panel crash on open fixed

Opening a PR side panel no longer throws a React error in production. The fix restructures the panel component so hooks are called consistently regardless of open state.

The PR side panel was crashing in production on Vercel deployments. When users clicked a story link, the panel would fail to open and dump a React #310 error to the console — but the same code worked fine locally.

The root cause lived in how SWC's minifier handled the component's early return. The panel's focus-trap logic used a useEffect hook after the early exit check, which looked correct in source but collapsed into a conditional hook call after minification. React enforces strict rules about hook order, and the production bundle violated them: three hooks when closed, four when open.

The fix splits the panel into two pieces. A thin wrapper renders only when the panel is open, and the inner component holds all the hooks. Hook order is now the same whether the panel mounts or not, eliminating the structural violation. Focus trapping works as before — the effect still runs only when the panel is open and handles keyboard navigation and accessibility.

This was a tricky bug that hid behind inconsistent behavior between development and production builds. The split structure is more explicit about when behavior applies, which should prevent similar issues in the future.