useInsertionEffect

Definition

Hook qui s'execute avant toute mutation DOM, concu 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 prets 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 reserve aux librairies CSS-in-JS (styled-components, Emotion) pour injecter du CSS.

Termes lies