Frontender Libs - обзор библиотек JS / CSS

Синхронная вставка элементов в DOM

useInsertionEffect - это хук, который позволяет синхронно вставлять элементы в DOM перед срабатыванием эффектов layout.

Чем он отличается от других хуков:

useEffect: срабатывает после layout и paint, что может привести к мерцанию при динамическом изменении стилей.

useLayoutEffect: срабатывает синхронно перед layout, но может привести к повторным вычислениям layout, если стили вставляются во время рендеринга.


Пример использования:

const useDynamicStyles = () => {
  const [style, setStyle] = useState('');

  useInsertionEffect(() => {
    const styleElement = document.createElement('style');
    styleElement.textContent = style;
    document.head.appendChild(styleElement);

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

  return style;
};

👉 @sWebDev

www.tg-me.com/us/Frontender Libs обзор библиотек JS CSS/com.sWebDev/2816

1.8K viewsApr 15, 2024 at 08:11

Синхронная вставка элементов в DOM

useInsertionEffect - это хук, который позволяет синхронно вставлять элементы в DOM перед срабатыванием эффектов layout.

Чем он отличается от других хуков:

useEffect: срабатывает после layout и paint, что может привести к мерцанию при динамическом изменении стилей.

useLayoutEffect: срабатывает синхронно перед layout, но может привести к повторным вычислениям layout, если стили вставляются во время рендеринга.


Пример использования:

const useDynamicStyles = () => {
  const [style, setStyle] = useState('');

  useInsertionEffect(() => {
    const styleElement = document.createElement('style');
    styleElement.textContent = style;
    document.head.appendChild(styleElement);

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

  return style;
};

BY Frontender Libs - обзор библиотек JS / CSS