fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
2.2 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Prevent Hydration Mismatch Without Flickering | MEDIUM | avoids visual flicker and hydration errors | rendering, ssr, hydration, localStorage, flicker |
Prevent Hydration Mismatch Without Flickering
When rendering content that depends on client-side storage (localStorage, cookies), avoid both SSR breakage and post-hydration flickering by injecting a synchronous script that updates the DOM before React hydrates.
Incorrect (breaks SSR):
function ThemeWrapper({ children }: { children: ReactNode }) {
// localStorage is not available on server - throws error
const theme = localStorage.getItem('theme') || 'light';
return <div className={theme}>{children}</div>;
}
Server-side rendering will fail because localStorage is undefined.
Incorrect (visual flickering):
function ThemeWrapper({ children }: { children: ReactNode }) {
const [theme, setTheme] = useState('light');
useEffect(() => {
// Runs after hydration - causes visible flash
const stored = localStorage.getItem('theme');
if (stored) {
setTheme(stored);
}
}, []);
return <div className={theme}>{children}</div>;
}
Component first renders with default value (light), then updates after hydration, causing a visible flash of incorrect content.
Correct (no flicker, no hydration mismatch):
function ThemeWrapper({ children }: { children: ReactNode }) {
return (
<>
<div id="theme-wrapper">{children}</div>
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
var theme = localStorage.getItem('theme') || 'light';
var el = document.getElementById('theme-wrapper');
if (el) el.className = theme;
} catch (e) {}
})();
`,
}}
/>
</>
);
}
The inline script executes synchronously before showing the element, ensuring the DOM already has the correct value. No flickering, no hydration mismatch.
This pattern is especially useful for theme toggles, user preferences, authentication states, and any client-only data that should render immediately without flashing default values.