Skip to content
This repository has been archived by the owner on Jan 28, 2024. It is now read-only.

Menambah materi debounce berdasarkan guideline #92

Open
masaditya opened this issue Apr 22, 2020 · 1 comment
Open

Menambah materi debounce berdasarkan guideline #92

masaditya opened this issue Apr 22, 2020 · 1 comment
Assignees
Labels
new topic creating new topic react

Comments

@masaditya
Copy link
Collaborator

masaditya commented Apr 22, 2020

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.

@masaditya masaditya added javascript javascript topic new topic creating new topic labels Apr 22, 2020
@mnindrazaka mnindrazaka added react and removed javascript javascript topic labels Apr 22, 2020
@mnindrazaka
Copy link
Member

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
new topic creating new topic react
Projects
None yet
Development

No branches or pull requests

2 participants