Menambah materi debounce berdasarkan guideline

[masaditya]

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

Kasus umum untuk meningkatkan performa pada react-app adalah ketika kita memiliki elemen input seperti di bawah ini

<input name="search" onChange={(event)=>setSearchValue(event.target.value)} />

yang berfungsi sebagai input pencarian di aplikasi. Namun jika kita membuat panggilan API untuk mengambil data pencarian, maka kita harus membuat panggilan API untuk setiap karakter yang diinput oleh pengguna, yang mana itu akan membuat kita melakukan banyak panggilan yang tidak diperlukan.

2. Penjelasan Materi Sebagai Solusi

Dengan menggunakan konsep debounce, kita bisa meningkatkan performa aplikasi dengan tidak membuat panggilan API untuk setiap karakter yang diinput oleh pengguna, tetapi hanya setelah input pengguna berhenti melakukan input selama beberapa milidetik.

3. Penjelasan Detail Materi

• cara mengimplementasi konsep debounce dengan setTimeout pada useEffect

  4. Contoh Kasus

  Diberikan langkah - langkah untuk membuat function yang digunakan untuk melakukan panggilan API, dimana nanti konsep debounce akan diimplementasikan pada function tersebut untuk meningkatkan performa pada aplikasi.

[mnindrazaka]

Bikin debouncenya jangan pake lodash, biar paham konsepnya, ini ada tutorial yang cukup mudah untuk nerapin debounce menggunakan setTimeout pada React.useEffect https://dev.to/gabe_ragland/debouncing-with-react-hooks-jci