Latihan 1: useMemo & useCallback — React

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

Hitung faktorial count dengan useMemo. Kode awal sudah punya function factorial dan state count yang mulai dari 1. Biarkan begitu.

Di dalam App, ganti TODO pertama dengan const result = useMemo(() => factorial(count), [count]). useMemo sudah tersedia di editor. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib.
Di dalam <div>, tampilkan hasilnya di <span id="result">{result}</span>.
Tambahkan <button id="inc" onClick={() => setCount((c) => c + 1)}>+1</button>.

Yang dicek: #result berbunyi 1 saat pertama tampil (faktorial 1), dan setelah sekali klik #inc berbunyi 2 (faktorial 2). Kodenya juga harus memakai useMemo( dengan dependency array [count].

Hint

useMemo mengingat hasil hitungan dan baru menghitung ulang kalau dependency-nya berubah. Di sini hitungannya factorial(count), jadi dependency-nya count.
Bentuknya const result = useMemo(() => hitungan, [dependency]). Lalu tampilkan result di span, dan tombolnya menaikkan count.
const result = useMemo(() => factorial(count), [count]) lalu <span id="result">{result}</span> dan <button id="inc" onClick={() => setCount((c) => c + 1)}>+1</button>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: useMemo & useCallback — React

Hint

Memperbarui Aplikasi