React Academy · Ders

INP'yi Azaltma: Olay İşleyicisi Optimizasyonu

Ağır işleyicileri debounce edin, scheduler.yield() kullanın ve ana iş parçacığını engelleyen uzun görevlerden kaçının.

INP'yi Azaltma: Olay İşleyicisi Optimizasyonu, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

INP Nedir?

Interaction to Next Paint (INP), bir kullanıcı etkileşiminden (tıklama, dokunma, tuşa basma) tarayıcının bu etkileşime verilen yanıtı görüntülemesine kadar geçen gecikmeyi ölçer. 200 ms'nin üzerindeki INP değeri sayfanın yavaş tepki verdiği hissini yaratır.

React Olayları Neden Yavaş Olabilir?

Çok fazla işi eşzamanlı olarak yapan React olay işleyicileri ana iş parçacığını engeller. Tarayıcı, JS görevi tamamlanana kadar yanıtı görüntüleyemez; bu da INP'nin yükselmesine neden olur.

Yazılan Girdiyi Debounce Etme

Tuş vuruşlarıyla tetiklenen maliyetli işlemleri (arama API çağrıları, ağır hesaplamalar) debounce edin. Her tuş vuruşunda React durumunu güncellemekte sakınca yoktur; maliyetli iş debounce edilmelidir.

import { useDeferredValue, useState } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query); // defers re-render of slow parts

  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <SearchResults query={deferredQuery} /> {/* re-renders with lower priority */}
    </>
  );
}

Acil Olmayan Güncellemeler için useTransition

Yavaş durum güncellemelerini acil olmayan olarak işaretlemek için startTransition içine alın. React bunları erteler ve girdinin yanıt vermeye devam etmesini sağlar.

const [isPending, startTransition] = useTransition();

function handleFilter(value) {
  setInputValue(value); // urgent — update input immediately
  startTransition(() => {
    setFilteredList(expensiveFilter(value)); // non-urgent — can be interrupted
  });
}

Ağır İşleri Ana İş Parçacığından Taşıma

CPU yoğun görevler (büyük veri kümelerini ayrıştırma, görsel işleme) için Web Worker'ları kullanın. Worker hesaplama yaparken ana iş parçacığı yanıt vermeye devam eder.

const worker = new Worker(new URL('./heavy-worker.js', import.meta.url));

function processData(data) {
  return new Promise(resolve => {
    worker.postMessage(data);
    worker.onmessage = e => resolve(e.data);
  });
}

// In component:
const handleClick = async () => {
  const result = await processData(largeDataset); // doesn't block main thread
  setResult(result);
};

Uzun Görevlerden Kaçınma

Uzun görevler (>50ms) ana iş parçacığını engeller ve INP'yi artırır. Bunları setTimeout, scheduler.yield() veya requestIdleCallback ile parçalara ayırın.

async function processInChunks(items) {
  const CHUNK_SIZE = 100;
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    processChunk(chunk);
    await new Promise(r => setTimeout(r, 0)); // yield to browser between chunks
  }
}

scheduler.yield() (Modern API)

scheduler.yield(), bekleyen kullanıcı etkileşimlerinin kodunuz devam etmeden önce işlenebilmesi için denetimi tarayıcının olay döngüsüne geri verir.

async function longTask() {
  for (const item of largeList) {
    processItem(item);
    if (/* every N items */) {
      await scheduler.yield(); // let browser handle pending clicks/inputs
    }
  }
}

İşleyicilerde Eşzamanlı Düzenlerden Kaçınma

Düzen özelliklerini (offsetWidth, getBoundingClientRect()) okumak, eşzamanlı bir düzenin yeniden hesaplanmasını zorunlu kılar. Düzenin sürekli yeniden hesaplanmasını önlemek için okumaları yazmalardan önce toplu olarak gerçekleştirin.

// Bad — forces layout recalculation on each iteration:
items.forEach(item => {
  const height = item.offsetHeight; // READ — forces layout
  item.style.height = height * 2 + 'px'; // WRITE — dirties layout
});

// Good — batch reads, then writes:
const heights = items.map(item => item.offsetHeight); // all reads
heights.forEach((h, i) => items[i].style.height = h * 2 + 'px'); // all writes

Eşzamansız INP için React 19 Actions

React 19 Actions, kullanıcı arayüzünü engellemeden eşzamansız değişiklikleri yönetir; bekleyen durum bağımsız olarak güncellenir ve sayfa etkileşimli kalır.

function LikeButton({ postId }) {
  const [optimistic, setOptimistic] = useOptimistic(false);

  async function handleLike() {
    setOptimistic(true);
    await likePost(postId); // async — doesn't block
  }

  return <button onClick={handleLike}>{optimistic ? 'Liked' : 'Like'}</button>;
}

Olay Yetkilendirmesinin Sakıncaları

React sentetik olay yetkilendirmesi kullanır (kök öğeye tek bir dinleyici ekler). useEffect içinde yüzlerce ayrı DOM dinleyicisi eklemekten kaçının; bunun yerine JSX öğelerinde React'in sentetik olaylarını kullanın.

DevTools'ta INP Ölçümü

Bir etkileşimi kaydetmek ve uzun görevleri incelemek için Chrome DevTools Performance panelini kullanın. Zaman çizelgesinde "Interaction" girdilerini arayın ve engelleyen betik değerlendirmelerini bulmak için bunları genişletin.

Hızlı Kontrol

Bir durum güncellemesini acil olmayan olarak işaretleyerek kullanıcı etkileşimleri tarafından kesilebilmesini sağlayan React kancası hangisidir?

Özet

Maliyetli işleri debounce ederek, acil olmayan güncellemeler için startTransition kullanarak, CPU işlerini Web Worker'lara aktararak ve uzun görevleri scheduler.yield() ile bölerek INP'yi azaltın. Düzenin sürekli yeniden hesaplanmasını önlemek için DOM okumalarını yazmalardan önce toplu olarak gerçekleştirin.

Sıkça Sorulan Sorular

“INP'yi Azaltma: Olay İşleyicisi Optimizasyonu” dersi ücretsiz mi?

Evet — “INP'yi Azaltma: Olay İşleyicisi Optimizasyonu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“INP'yi Azaltma: Olay İşleyicisi Optimizasyonu” dersinde ne öğreneceğim?

Ağır işleyicileri debounce edin, scheduler.yield() kullanın ve ana iş parçacığını engelleyen uzun görevlerden kaçının. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“INP'yi Azaltma: Olay İşleyicisi Optimizasyonu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

React Uygulamalarında Temel Web Ölçümlerini Ölçme
Paket Analizi ve Kod Bölme Stratejisi
React'te Görüntü ve Yazı Tipi Optimizasyonu
INP'yi Azaltma: Olay İşleyicisi Optimizasyonu

← React Academy Sayfasına Dön