imagine React is building a webpage and painting it on a canvas:

• Before it paints, you want to insert some custom styles (like colors, spacing, fonts).
• If you do this too late, there might be a flicker or wrong layout shown briefly.
• useInsertionEffect ensures your styles are inserted just in time — right before React applies layout and paint.

useInsertionEffect(() => {
  const style = document.createElement('style');
  style.textContent = '.my-class { color: red; }';
  document.head.appendChild(style);

  return () => {
    document.head.removeChild(style);
  };
}, []);