You might have occasionally came across “javascript:void(0)” in an HTML Document. It is often used when inserting an expression in a web page might produce some unwanted effect. To remove this effect, “javascript:void(0)” is used. This expression returns undefined primitive value. This is often used with hyperlinks. Sometimes, you will decide to call some JavaScript from inside a link. Normally, when you click a link, the browser loads a brand new page or refreshes the same page (depending on the URL specified). But you most likely don’t desire this to happen if you have hooked up some JavaScript thereto link. To prevent the page from refreshing, you could use void(0). Using “#” in anchor tag: When writing the following code in the editor, the web page is refreshed after the alert message is shown. Example:
Hal yang paling dibenci kebanyakan developer saat menggunakan React JS adalah PERFORMANCE OPTIMIZATION, karena seharusnya developer website tidak suka jika skor performa website yang dibangunnya berwarna merah saat dicek menggunakan tools seperti Lighthouse.
React JS mengeluarkan beberapa solusi untuk permasalahan developer di atas, salah satunya adalah memoization yang menurut beberapa sumber memiliki arti sebagai berikut :
Memoization adalah sebuah fitur yang terdapat di beberapa pemrograman komputer yang menawarkan optimasi di bagian performa dengan menggunakan cache.
Dari penjelasan di atas seharusnya kamu sudah mendapatkan sedikit gambaran tentang definisi dari memoization. Kalau di React JS sendiri memoization berguna untuk caching sebuah component maupun value sehingga tidak perlu melakukan pre-render atau merender kembali component yang bahkan tidak diperlukan. Contoh kasusnya seperti ini :
Sebenarnya jika dilihat kodingan di atas sudah benar dan tidak ada yang salah karena sejatinya memang begitu, tetapi ada satu masalah yang cukup menyebalkan untuk beberapa developer perfeksionis, yaitu Re-Render.
Benar, jika kita telisik kodingan di atas akan terus menerus melakukan re-render komponen User saat kita melakukan perubahan pada input sehingga dapat menyebabkan masalah yang serius terhadap performa apabila komponen yang di re-render terdapat heavy function di dalamnya.
Hal itu dapat diatasi dengan menggunakan dua hooks memoization yang katanya jamu cespleng performa di React JS. Dua hooks tersebut adalah useCallback dan useMemo, walaupun saya hanya akan membahas tentang useCallback pada artikel kali ini.
Antara dua hooks tersebut sebenarnya saling berkaitan karena sama-sama melakukan memoize di React JS, bedanya kalau useCallback return valuenya adalah callback yang sudah di memoize sedangkan useMemo mengembalikan value data yang sudah di memoize di dalam useMemo. Pada kesempatan kali ini saya akan membahas sedikit tentang useCallback dan cara penggunaannya di React JS. Untuk itu mari kita ubah kodingan kita di atas menggunakan useCallback.
Menggunakan useCallback
Di kodingan kita di atas, kita mempunyai dua fungsi import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> } 0 dan import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> } 1, yang dari namanya saja seharusnya antum bisa menebak kegunaan dua fungsi tersebut. Tapi berhubung saya baik hati akan saya jelaskan sedikit. Jadi, fungsi import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> } 0 akan menghapus data user dari state import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> } 3, sedangkan fungsi import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> } 1 akan mengisi kembali state import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> } 3 dengan array import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> } 6.
Setelah mengetahui kegunaan kedua fungsi tersebut mari kita menyelam lebih jauh ke dalam pembahasan kita kali ini. Jadi permasalahan yang dihadapi adalah setiap kita mengubah state import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> } 7 melalui input maka komponen User akan ikut di re-render yang bahkan komponen User tidak memiliki hubungan dengan input text.
Apabila kasus kita tersebut ingin teratasi, maka kita perlu menyisipkan function import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> } 0 sebagai callback ke dalam useCallback, yang kurang lebih berbentuk seperti ini :
Kodingan di atas bermaksud untuk memberi tahu React bahwa jangan re-render komponen User apabila tidak ada perubahan pada state import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> } 3 bahkan jika komponen useCallback1 di re-render saat kita mengubah value di input.
Kapan Waktu Menggunakan useCallback?
useCallback dapat berguna dengan tepat apabila kita menempatkannya pada kondisi yang tepat, misal seperti kita pada kasus di atas menginkan komponen User tidak terus di re-render pada saat kita mengubah value di input yang tidak ada hubungannya dengan komponen User.
Namun, useCallback juga bisa menjadi masalah performa pada aplikasi React JS kita. Contohnya kasus dengan kodingan di bawah ini :
Pada kodingan di atas terlihat jika kita menambahkan useCallback pada fungsi useCallback3 yang sebenarnya tidak perlu dilakukan, dan fungsi useCallback3 ini juga akan di buat lagi apabila komponen App di re-render sehingga dapat mengakibatkan performa aplikasi React JS kita menurun, akan lebih baik jika kita menulisnya seperti ini :
import { PropsWithChildren } from 'react'; export default function App() { const handleClick = () => console.log('Clicked!') return Click Me! } function Button({ onClick, children }: PropsWithChildren<{ onClick: (() => void) }>) { return {children}> }Tentunya kodingan kita di atas yang tanpa menggunakan useCallback lebih simpel walaupun hanya beberapa baris, namun hal tersebut sangat berguna apabila aplikasi React JS kita berkembang lebih berat lagi.
Kesimpulan
Dari kasus di atas, kita bisa menyimpulkan bahwasanya useCallback dapat berguna apabila kita menempatkannya pada kondisi yang memang dibutuhkan. Sehingga kita tidak menyia-nyiakan resource server dengan pemrosesan yang berat.
Jadi kita sebagai developer harus pintar-pintar mengetahui kebutuhan apa saja yang diperlukan oleh aplikasi React JS, sama halnya seperti kamu yang terus-terusan memberikan hadiah ke gebetan yang sebenarnya tidak membutuhkan hal tersebut karena ada hati yang harus dijaga.
Sampai di sini saja artikel tentang useCallback kali ini, apabila terdapat kesalahan penulisan, penjelasan, dan ejaan silakan dikoreksi dengan mengirim kontak ke saya melalui formulir kontak yang sudah disediakan, karena saya belum sempat menambahkan fitur comment di sini, mungkin hari ini, hari esok atau nanti.