Latihan 1 dari materi React.memo di React — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya ExpensiveList yang dibungkus memo, dan App dengan counter. Masalahnya: tiap tombol +1 diklik, List dirender tetap tercetak lagi di console. Perbaiki supaya memo-nya benar-benar bekerja.
ExpensiveList dibungkus memo(...), dengan console.log("List dirender") di dalamnya, sebelum return.ExpensiveList merender <ul id="list"> berisi 3 <li> dari items.map(...), berurutan A, B, C: item pertama A, item terakhir C.App (<span id="count"> dan <button id="inc">) seperti di kode awal.items tetap sama di tiap render: pindahkan const items = ["A", "B", "C"] ke luar App, atau bungkus dengan useMemo.memo, useState dan useMemo sudah tersedia di editor. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib.
Yang dicek:
#list dengan minimal 3 <li>. <li> pertama berisi A, <li> terakhir berisi C.memo ada di kodemu, bukan cuma di komentar, dan console.log("List dirender") ada di dalam ExpensiveList.List dirender muncul di console waktu halaman pertama kali dirender.#inc diklik, #count jadi 1, dan List dirender gak muncul lagi.
