Latihan 2: useRef — React

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

Hitung berapa kali komponen sudah render, pakai ref. Kode awal sudah punya state value, ref const renderCount = useRef(0), <span id="render-count">{renderCount.current}</span>, tombol <button id="update">Update</button> yang menjalankan setValue((v) => v + 1), dan useEffect tanpa dependency array yang isinya masih kosong. Biarkan semuanya.

Di dalam effect itu, naikkan isi ref satu: renderCount.current = renderCount.current + 1 (boleh juga renderCount.current++).
Jangan beri dependency array, supaya effect jalan sesudah setiap render.

Yang dicek: #render-count ada, kodenya memakai useRef( dan mengubah .current (dengan =, ++, atau +=), sesudah 1 klik #update, #render-count menampilkan 1, dan dari awal lagi, sesudah 2 klik menampilkan 2. Sebelum diklik ia menampilkan 0: effect jalan sesudah render, jadi angka yang tampil adalah jumlah render sebelum render ini.

Hint

Effect jalan sesudah render. Ref yang dinaikkan di situ gak memicu render lagi, jadi gak ada loop.
Di dalam useEffect(() => { ... }) yang tanpa array, naikkan renderCount.current satu.
useEffect(() => { renderCount.current = renderCount.current + 1 })

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: useRef — React

Hint

Memperbarui Aplikasi