Day 6 & 7 - Clock app

Pada hari ke 3,4,5 aku tidak mempostingnya karena pada hari itu aku tidak membuat project, melainkan sepenuhnya membaca dokumentasi milik react. Aku mendedikasikan diri untuk membaca bagian state management yang aku pikir itu akan membantuku di masa yang akan datang.

Pada tiga hari itu aku menyelesaikan membaca dokumentasi pada bagian:

• https://react.dev/learn/managing-state
• https://react.dev/learn/referencing-values-with-refs

Barulah pada hari ke 6 dan 7 aku mengimplementasikan apa yang aku pelajari dengan membuat sebuah clock app. Pada hari ke 7 ini fitur yang selesai adalah stopwatch yang bisa dilihat di sini.

Apa yang aku pelajari:

• Jarak antara waktu mulai dan waktu berhenti dapat digunakan untuk membuat stopwatch. tapi pendekatan ini tidak dapat digunakan apabila stopwatch memiliki fitur pause.

• Pendekatan yang lebih proper digunakan yaitu dengan menghitung durasi dalam milidetik agar fitur pause dapat diimplementasikan. Hal ini karena pendekatannya adalah increment, dan fungsi start akan menambah selama stopwatch dalam keadaan running. apabila dipause, maka nilai terakhir akan disimpan, dan apabila dimulai lagi maka nilai terakhir akan dijadikan referensi untuk kembali dilakukan increment.

• ketika mengubah state dan mereferensi nilai sebelumnya, maka gunakanlah fungsi (prev) => { what value that you want}.

Code di bawah ini tidak akan bekerja semestinya:

const intervalRef = useRef(null);
const [millisecondsPassed, setMilisecondsPassed] = useState(0);

intervalRef.current = setInterval(() => {
  setMilisecondsPassed(millisecondsPassed +10);
}, 10);

hal tersebut karena yang direferensikan oleh millisecondsPasseddi dalam setMilisecondsPassed(millisecondsPassed +10);mengacu ke nilai yang sama setiap saat dalam interval tersebut. Misal apabila milisecondsPassed awalnya adalah 0, maka hasil penjumlahannya akan selalu 10, bukan increment seperti 10, 20, 30, 40, …dst. Code yang benar adalah sebagai berikut:

const intervalRef = useRef(null);
const [millisecondsPassed, setMilisecondsPassed] = useState(0);

intervalRef.current = setInterval(() => {
  setMilisecondsPassed((prev) => prev + 10);
}, 10);