Digital Transformation
isInputPending API
TL;DR: isInputPending adalah method dari Scheduler API yang mengembalikan boolean, true jika ada input event (klik, tap, key) yang menunggu diproses browser. Developer pakai ini untuk menjeda task panjang di JavaScript ketika ada interaksi pengguna, sehingga halaman terasa responsif dan skor INP tetap baik.
Apa itu isInputPending API?
isInputPending API adalah bagian dari Web Scheduler spec yang diakses via navigator.scheduling.isInputPending(). Fungsinya: mengecek apakah browser punya input event di queue yang belum diproses karena main thread sibuk. Jika true, script harus segera yield (lewat setTimeout, scheduler.yield, atau await new Promise(requestAnimationFrame)) supaya browser bisa menangani input dulu.
API ini relevan untuk task heavy seperti parsing JSON besar, hidrasi React, atau processing data analytics. Tanpa yield yang tepat, script bisa memblok input dan merusak INP (Interaction to Next Paint).
Cara Kerja
Pemakaian dasar di dalam loop:
| Pattern | Contoh |
|---|---|
| Cek default | if (navigator.scheduling?.isInputPending()) await yieldToMain(); |
| Cek dengan filter event | isInputPending({ includeContinuous: true }) |
| Yield helper | () => new Promise(r => setTimeout(r, 0)) |
Implementasi lengkap biasanya jadi pattern chunked task: split work jadi unit kecil, cek isInputPending di antara unit, yield kalau true. Ini pendekatan yang dipakai React Concurrent Mode dan Scheduler internal Next.js.
Kenapa Penting?
Marketer sering memasang tracking script atau widget personalization yang memproses banyak data di first load. Tanpa yield, klik pertama pengguna bisa delay 300-500 ms karena main thread sibuk. Dalam audit yang Vito Atmo lakukan untuk dashboard analitik klien, mengganti loop besar dengan pattern isInputPending memperbaiki p75 INP dari 420 ms ke 180 ms tanpa mengurangi feature apapun.
Pertanyaan Umum
Apa beda isInputPending dengan scheduler.yield?
isInputPending cuma mengecek, scheduler.yield benar-benar menjeda eksekusi. Biasanya keduanya dipakai bersama: cek dengan isInputPending, yield dengan scheduler.yield.
Apakah didukung Safari atau Firefox?
Per Mei 2026, masih Chromium-only. Pakai feature detection dan fallback ke setTimeout untuk browser lain.
Istilah Terkait