useInsertionEffect

useInsertionEffect(setup, dependencies?)

• Referans
  • useInsertionEffect(setup, dependencies?)
• Kullanım
  • CSS-in-JS kütüphanelerinden dinamik stilleri ekleme

Referans

useInsertionEffect(setup, dependencies?)

Layout’ı okuma ihtimali olan herhangi bir efekt tetiklenmeden önce stil eklemek için useInsertionEffect hookunu çağırın:

import { useInsertionEffect } from 'react';

// Inside your CSS-in-JS library
function useCSS(rule) {
  useInsertionEffect(() => {
    // ... inject <style> tags here ...
  });
  return rule;
}

Aşağıda daha fazla örneğe göz atın.

Parametreler

• setup: Effect mantığınızı içeren fonksiyon. Setup fonksiyonunuz isteğe bağlı olarak bir temizlik fonksiyonu döndürebilir. Bileşeniniz DOM’a eklenmeden önce, React setup fonksiyonunuzu çalışıtıracak. Değişen bağımlılıklarla her yeniden render işleminde, React önce (varsa) temizlik işlevinizi eski değerlerle çalıştıracak, ardından setup fonksiyonunuzu yeni değerlerle çalıştıracaktır. Bileşeniniz DOM’dan kaldırıldığında, React temizlik fonksiyonunuzu çalıştıracaktır.

• opsiyonel dependencies: setup kodunun içinde referans verilen tüm reaktif değerlerin listesi. Reaktif değerler, props, state ve direkt olarak bileşen içinde belirtilen tüm değişkenleri ve fonksiyonları içerir. Eğer linteriniz React için yapılandırılmış, her reaktif değerin bağımlılık olarak doğru şekilde belirtildiğini doğrulayacaktır. Bağımlılıkların listesi sabit sayıda ögeye sahip olmalı ve [dep1, dep2, dep3] gibi sıralı şekilde yazılmalıdır. React Object.is karşılaştırma algoritmasını kullanarak her bağımlılığı önceki değeriyle karşılaştıracak. Bağımlılıkları hiç belirtmezseniz, Efektiniz bileşenin her yeniden render işleminde tekrar çalışacaktır.

Dönüş Değerleri

useInsertionEffect hooku undefined değerini döndürür.

Uyarılar

• Efektler sadece kullanıcı tarafında çalışır. Sunucu tarafı render işleminde çalışmazlar.
• useInsertionEffect içerisinden state’i güncelleyemezsiniz.
• useInsertionEffect çalıştığı sırada, referanslar (refler) henüz eklenmemiştir.
• useInsertionEffect DOM güncellendikten önce ya da sonra çalışabilir. DOM’un belirli bir zamanda güncelleniyor olmasına güvenmemelisiniz.
• Her efekt için temizleme (cleanup) ve kurulum (setup) fonksiyonlarını çalıştıran diğer efekt tiplerinin aksine, useInsertionEffect her seferinde tek bir bileşen için hem temizleme hem de kurulum fonksiyonlarını çalıştırır. Bu, temizleme ve kurulum fonksiyonlarının araya girmesine sebep olur.

Kullanım

CSS-in-JS kütüphanelerinden dinamik stilleri ekleme

Geleneksel olarak, React bileşenlerini saf CSS kullanarak stillendirirsiniz.

// In your JS file:
<button className="success" />

// In your CSS file:
.success { color: green; }

Bazı takımlar, CSS dosyaları yazmak yerine stilleri direkt olarak Javascript kodları içerisinde yazmayı tercih eder. Bu yaklaşım genellikle bir CSS-in-JS kütüphanesi veya bir aracı kullanmayı gerektirir. CSS-in-JS için üç genel yaklaşım vardır:

1. Bir derleyici ile CSS dosyalarına statik olarak çıkarma
2. Satır içi stiller, örn. <div style={{ opacity: 1 }}>
3. <style> etiketlerinin çalışma zamanında eklenmesi

CSS-in-JS kullanıyorsanız, genellikle ilk iki yaklaşımın (Statik stiller için CSS dosyaları, dinamik stiller için satır içi stiller) bir kombinasyonunu öneriyoruz. <style> etiketi eklenmesini iki sebeple önermiyoruz:

1. Çalışma zamanı ekleme yapılması tarayıcıları stilleri birçok kez yeniden hesaplama yapması için zorlar.
2. Çalışma zamanı ekleme yapılması, React yaşam döngüsünde yanlış zamanda gerçekleşirse oldukça yavaş olabilir.

İlk problem çözülemezken, ama useInsertionEffect hooku ikinci problemi çözmenize yardımcı olur.

Herhangi bir layout efektinden önce stilleri eklemek için useInsertionEffect hookunu çağırın:

// Inside your CSS-in-JS library
let isInserted = new Set();
function useCSS(rule) {
  useInsertionEffect(() => {
    // As explained earlier, we don't recommend runtime injection of <style> tags.
    // But if you have to do it, then it's important to do in useInsertionEffect.
    if (!isInserted.has(rule)) {
      isInserted.add(rule);
      document.head.appendChild(getStyleForRule(rule));
    }
  });
  return rule;
}

function Button() {
  const className = useCSS('...');
  return <div className={className} />;
}

useEffect hookuna benzer olarak, useInsertionEffect hooku sunucuda çalışmaz. Eğer hangi CSS kurallarının sunucu tarafında kullanıldığını bilmeniz gerekiyorsa, render işlemi sırasında bunu yapabilirsiniz.

let collectedRulesSet = new Set();

function useCSS(rule) {
  if (typeof window === 'undefined') {
    collectedRulesSet.add(rule);
  }
  useInsertionEffect(() => {
    // ...
  });
  return rule;
}

CSS-in-JS kütüphanelerini çalışma zamanı ekleme yapılarak useInsertionEffect hookunu kullanarak nasıl güncelleyeceğiniz hakkında daha fazla bilgi edinin.