useInsertionEffect

Définition

Hook qui s'exécute avant toute mutation DOM, conçu pour les librairies CSS-in-JS qui doivent injecter des balises <style> avant le layout.

Analogie

Comme poser le papier peint avant d'installer les meubles : les styles sont prêts avant que le DOM n'existe.

Exemple de code

// Reserve aux auteurs de libs CSS-in-JS
useInsertionEffect(() => {
  const style = document.createElement('style');
  style.textContent = '.btn { color: red; }';
  document.head.appendChild(style);
  return () => style.remove();
}, []);

Cas d'usage

Exclusivement réserve aux librairies CSS-in-JS (styled-components, Émotion) pour injecter du CSS.

Termes liés