Latihan 1: Debugging React — Debugging

Latihan 1 dari materi Debugging React di Debugging — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya log (11 catatan render dari Profiler) dan enam baris console.log, biarkan. Lengkapi tiga function. Tiap catatan berbentuk { component, duration, reason, props, state }, dan reason salah satu dari "mount", "props", "state", "parent", "hooks".

profilerSummary(renders) mengembalikan object berisi:
- totalDuration: jumlah semua duration, dibulatkan dengan Math.round
- byReason: object berisi banyaknya catatan per reason, misalnya { mount: 4, state: 2, parent: 5 }
- slowestComponent: nama komponen dengan total duration terbesar (jumlahkan per komponen dulu)
findWastedRenders(renders) mengembalikan array nama komponen yang punya render sia-sia, tiap nama sekali, urut alfabet. Render sia-sia adalah catatan dengan reason "parent" yang props dan state-nya sama persis (bandingkan dengan JSON.stringify) dengan salah satu catatan sebelumnya dari komponen yang sama.
recommendMemo(renders, threshold) mengembalikan array nama komponen yang render sia-sianya minimal threshold kali, urut alfabet.

Yang dicek, satu per baris di console, urut: 49, 4, 5, List, Item,List, Item,List.

Ada juga cek dengan log lain: dari catatan A (1 ms) dan B (9 ms), slowestComponent harus "B". Untuk komponen X yang mount lalu render karena "parent" dengan props dan state kosong yang sama, findWastedRenders harus menghasilkan X, dan recommendMemo dengan threshold 2 harus mengembalikan array kosong.

Hint

Tiga function, tiga cara mengelompokkan catatan yang sama: semuanya dijumlah, dihitung per reason, dan dijumlah per komponen. Render sia-sia butuh pembanding: catatan komponen yang sama yang muncul lebih dulu.
Di profilerSummary, satu loop for...of cukup: tambah totalDuration, naikkan byReason[r.reason], dan tambah byComponent[r.component] dengan r.duration, lalu ambil nama dengan total terbesar. Untuk render sia-sia, pakai renders.slice(0, i).some(...) yang membandingkan component, JSON.stringify(props), dan JSON.stringify(state), lalu hitung per komponen.
function wastedCounts(renders) { const counts = {}; renders.forEach((r, i) => { if (r.reason !== "parent") return; const sama = renders.slice(0, i).some((p) => p.component === r.component && JSON.stringify(p.props) === JSON.stringify(r.props) && JSON.stringify(p.state) === JSON.stringify(r.state)); if (sama) counts[r.component] = (counts[r.component] || 0) + 1; }); return counts; } lalu findWastedRenders: return Object.keys(wastedCounts(renders)).sort(); dan recommendMemo: const c = wastedCounts(renders); return Object.keys(c).filter((n) => c[n] >= threshold).sort();

HyperSheets

Memperbarui Aplikasi

Versi baru tersedia. Halaman akan dimuat ulang otomatis...

Masih kosong setelah muat ulang?

Tutup paksa aplikasi lalu buka lagi
Hapus cache: Pengaturan > Aplikasi > Hyper Sheets > Hapus Cache
Jika pakai browser: tekan Ctrl+Shift+R

Butuh bantuan?

Gabung Discord Laporkan Bug