Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
useInsertionEffect is a specialized Hook that fires before all DOM mutations and before React reads layout. It's designed specifically for CSS-in-JS libraries to inject styles without causing layout thrashing or visual flicker.
useInsertionEffect
Inject styles BEFORE React reads layout
React Updates DOM
Applies changes to the DOM
useLayoutEffect
Read layout BEFORE paint
useEffect
Run AFTER paint
CSS-in-JS libraries need to inject styles before React reads layout to prevent:
First, create your dynamic CSS rules based on props or state. This is where you generate the styles that need to be injected.
Dynamic Generation
Create CSS rules dynamically based on props, theme, or any runtime data.
Wrap your style injection logic in useInsertionEffect. This ensures styles are injected before React reads layout.
Critical Timing
This runs BEFORE React reads layout, preventing style flicker!
Create a function that injects CSS into the DOM. Usually this creates a style element or updates an existing one.
DOM Manipulation
Creates or updates style elements in the document head.
Apply the dynamically generated class names to your components. The styles are already injected, so they'll apply immediately.
No Flicker!
Styles are already injected when the component renders, so no visual flicker!
Prevent style flicker with useInsertionEffect
function DynamicStyleExample() {
const [color, setColor] = React.useState('#4f46e5');
const [size, setSize] = React.useState('medium');
// Generate CSS based on props
const generateStyles = (color, size) => {
const padding = size === 'small' ? '8px' : size === 'large' ? '24px' : '16px';
return `
.dynamic-box {
background-color: ${color};
padding: ${padding};
border-radius: 8px;
color: white;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
`;
};
// Inject styles BEFORE React reads layout
React.useInsertionEffect(() => {
const styles = generateStyles(color, size);
// Create or update style element
let styleElement = document.getElementById('dynamic-styles');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.id = 'dynamic-styles';
document.head.appendChild(styleElement);
}
styleElement.textContent = styles;
console.log('Styles injected before layout read!');
}, [color, size]);
return (
<div className="container">
<h2>Dynamic CSS-in-JS Styling</h2>
<p>Notice: No style flicker when changing colors or sizes!</p>
<div className="controls">
<label>
Color:
<input
type="color"
value={color}
onChange={(e) => setColor(e.target.value)}
/>
</label>
<label>
Size:
<select
value={size}
onChange={(e) => setSize(e.target.value)}
>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</label>
</div>
<div className="dynamic-box">
I'm styled with useInsertionEffect! 🎨
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DynamicStyleExample />);Loading preview...
Building your own styled-components or emotion-like library
Injecting theme-based styles that change at runtime
When you absolutely must prevent style flicker in complex applications
Use useEffect for data fetching, subscriptions, or general side effects
Use useLayoutEffect for measuring DOM elements before paint
Most applications don't need this hook. Use CSS modules or styled libraries instead
Runs before all DOM mutations and layout calculations in React.
Specifically designed for CSS-in-JS libraries to prevent style flicker.
Cannot read layout or access DOM refs since it runs before layout is calculated.
Specialized hook - most developers will never need to use it directly.