useInsertionEffect

A version of useEffect that fires synchronously before any DOM mutations occur. It is designed specifically for CSS-in-JS libraries to inject <style> tags into the DOM before layout is read or elements are painted.

import { useInsertionEffect } from 'react';

const Component = () => {
    useInsertionEffect(() => {
        const style = document.createElement('style');
        // Set CSS before render...
    }, []);

    // ...
};