`Hook-ul useInsertionEffect: Injectarea de Stiluri CSS-in-JS` în React & Next.js

Ghid complet pentru useInsertionEffect în React: injectarea dinamică a regulilor de stil CSS înainte de calculul layout-ului și optimizarea bibliotecilor CSS-in-JS.

Sintaxă

useInsertionEffect(() => { ... return () => cleanup(); }, [deps]);

Introdus în React 18, hook-ul useInsertionEffect este proiectat cu un scop ultra-specializat: se execută înainte de orice mutație DOM și înainte ca useLayoutEffect să citească layout-ul. Scopul său exclusiv este să permită bibliotecilor de CSS-in-JS (cum ar fi Styled Components sau Emotion) să insereze elemente <style> în document înainte ca browserul să calculeze stilurile geometrice.

Injectarea unei reguli CSS dinamice

import { useInsertionEffect } from 'react';

function injecteazaStiluri(regulaCSS) {
  let tagStil = document.querySelector('style[data-custom-rules]');
  if (!tagStil) {
    tagStil = document.createElement('style');
    tagStil.setAttribute('data-custom-rules', 'true');
    document.head.appendChild(tagStil);
  }
  tagStil.textContent += regulaCSS;
}

export function ButonTematizat({ culoare }) {
  const numeClasa = `btn-dinamic-${culoare}`;

  useInsertionEffect(() => {
    // Inserăm regula înainte ca useLayoutEffect să măsoare elementul:
    injecteazaStiluri(`.${numeClasa} { background-color: ${culoare}; color: white; padding: 10px; }`);
  }, [culoare, numeClasa]);

  return <button className={numeClasa}>Buton Stilizat</button>;
}

Restricție de utilizare: Nu actualizați starea React (prin setState) și nu accesați referințe DOM (refs) în interiorul lui useInsertionEffect, deoarece nodurile DOM încă nu sunt sincronizate la momentul execuției.