3 Kesalahan Reaksi Pemula yang Dapat Merusak Aplikasi Anda
Table of content:
Sebagai pengembang React, Anda pasti membuat beberapa kesalahan saat membuat kode dengan framework. Beberapa kesalahan ini cukup umum. Dan karena sifatnya yang halus, Anda mungkin kesulitan mengidentifikasi masalah ini untuk men-debug aplikasi Anda.
Temukan tiga kesalahan React paling umum yang dibuat pengembang. Anda dapat membuat kesalahan ini sebagai pengembang React pemula, tingkat menengah, atau lanjutan. Tetapi mempelajari tentang mereka dan implikasinya akan membantu Anda menghindari dan menyelesaikannya.
1. Menggunakan Jenis Fungsi Callback yang Salah
Penanganan event adalah praktik umum di React, melalui fungsi mendengarkan event yang kuat dari JavaScript. Mungkin Anda ingin mengubah warna tombol saat diarahkan. Mungkin Anda ingin mengirim data formulir ke server saat pengiriman. Dalam kedua skenario ini, Anda harus meneruskan fungsi panggilan balik ke acara untuk melakukan reaksi yang diinginkan. Di sinilah beberapa pengembang React membuat kesalahan.
Baca Juga:
Pertimbangkan komponen berikut, misalnya:
export default function App() {
function handleSubmit(e) {
e.preventDefault()
console.log("Form submitted!")
} function print(number) {
console.log("Print", number)
}
function doubler(number) {
return () => {
console.log("Double", number * 2)
}
}
return (
<>
{}
</>
)
}
Di sini Anda memiliki tiga fungsi terpisah. Sementara dua fungsi pertama tidak menghasilkan apa-apa, yang ketiga mengembalikan fungsi lain. Anda harus mengingatnya karena itu akan menjadi kunci untuk memahami apa yang akan Anda pelajari selanjutnya.
Sekarang, beralih ke JSX, mari kita mulai dengan cara pertama dan paling umum untuk melewatkan sebuah fungsi sebagai event handler:
<form onSubmit={handleSubmit}>
<input type="text" name="text" defaultValue="initial"/>
<button>Submit</button>
</form> Contoh ini meneruskan nama fungsi ke acara melalui prop onSubmit sehingga React memanggil handleSubmit saat Anda mengirimkan formulir. Di dalam handleSubmit, Anda dapat mengakses objek acara, yang memberi Anda akses ke properti seperti peristiwa.target.nilai dan metode seperti acara.preventDefault().
Cara kedua untuk melewatkan fungsi event handler adalah dengan memanggilnya di dalam fungsi callback. Pada dasarnya, Anda meneruskan fungsi onClick yang memanggil print() untuk Anda:
{[1, 5, 7].map((number) => {
return (
<button key={number} onClick={() => print(number)}>
Print {number}
</button>
)
})} Metode ini berguna dalam skenario di mana Anda ingin meneruskan data lokal ke fungsi. Contoh di atas mengirimkan setiap angka ke fungsi print(). Jika Anda menggunakan metode pertama, Anda tidak akan bisa meneruskan argumen ke dalam fungsi.
Metode ketiga adalah di mana banyak pengembang membuat banyak kesalahan. Ingatlah bahwa fungsi pengganda mengembalikan fungsi lain:
function doubler(number) {
return () => {
console.log("Double", number * 2)
}
} Sekarang jika Anda menggunakannya di JSX seperti ini:
{[1, 5, 7].map((number) => {
return (
<button key={number} onClick={() => doubler(number)}>
Double {number}
</button>
)
})} Dalam hal ini, fungsi tempat Anda kembali dobel() adalah apa yang ditugaskan ke onClick. Ini pada dasarnya sama dengan menyalin fungsi yang dikembalikan dan menempelkannya sebaris di onClick. Metode terakhir ini tidak memiliki use case. Sering kali, Anda lebih baik menambahkan fungsi sebagai variabel (metode pertama) atau memanggil fungsi di dalam callback (metode kedua).
Ketiga teknik tersebut valid karena, dalam semua kasus, Anda meneruskan fungsi ke acara tersebut. Di React, Anda perlu memastikan bahwa Anda meneruskan fungsi ke properti acara. Itu bisa berupa variabel, fungsi hard-coded (inline), atau objek/fungsi yang mengembalikan fungsi lain.
2. Mengeluarkan Nol Selama Pemeriksaan Palsu
Saat Anda merender elemen secara kondisional di React, Anda bisa menggunakan pernyataan if…else atau teknik hubungan arus pendek. Hubungan arus pendek melibatkan penggunaan ampersand ganda (&&). Jika kondisi sebelum ampersand bernilai true, maka browser akan menjalankan kode mengikuti ampersand. Jika tidak, browser tidak akan menjalankan kode apa pun.
Hubungan arus pendek adalah teknik yang lebih baik berkat sintaksisnya yang ringkas, tetapi teknik ini memiliki efek samping yang tidak disadari oleh banyak pengembang. Kesalahan ini terjadi karena tidak memahami secara pasti bagaimana JSX bekerja dengan nilai-nilai palsu.
Pertimbangkan kode berikut:
export default function App() {
const array = [1, 2, 3, 4] return (
<div>
{array.length && (
<div>
<span>Array items:</span> {array.join(", ")}
</div>
)}
</div>
)
}
Selama array memiliki sesuatu di dalamnya, React akan mencetak setiap item pada halaman. Hal ini karena array.panjang cek mengembalikan nilai kebenaran. Tetapi apa yang terjadi jika array Anda kosong? Pertama, elemen berikutnya akan ditampilkan di halaman, seperti yang Anda harapkan. Namun, Anda akan menemukan angka nol yang aneh muncul di layar Anda.
Alasan untuk itu adalah itu array.panjang mengembalikan nol. Nilai nol salah dalam JavaScript. Dan masalahnya adalah JSX menghasilkan nol di layar. Nilai palsu lainnya seperti null, false, dan undefined tidak dirender. Ini dapat menyebabkan pengalaman pengguna yang buruk karena angka nol akan selalu muncul di halaman. Terkadang nol mungkin sangat kecil sehingga Anda bahkan tidak menyadarinya.
Solusinya adalah memastikan untuk hanya mengembalikan null, undefined, atau false. Anda melakukan ini dengan secara eksplisit mencentang nol dalam kondisi alih-alih mengandalkan nilai palsu:
export default function App() {
const array = [1, 2, 3, 4] return (
<div>
{array.length !== 0 && (
<div>
<span>Array items:</span> {array.join(", ")}
</div>
)}
</div>
)
}
Sekarang nilai nol tidak akan ditampilkan di layar bahkan saat array kosong.
3. Gagal Memperbarui Negara dengan Benar
Saat Anda memperbarui status dalam komponen React, Anda harus melakukannya dengan benar untuk menghindari efek samping yang tidak diinginkan. Kesalahan terburuk adalah kesalahan yang tidak membuat kesalahan apa pun untuk Anda. Mereka mempersulit untuk melakukan debug dan mencari tahu apa masalahnya. Pembaruan status yang buruk cenderung memiliki efek itu.
Kesalahan ini terjadi karena tidak memahami cara memperbarui status saat Anda menggunakan status yang ada. Pertimbangkan kode berikut misalnya:
export default function App() {
const [array, setArray] = useState([1, 2, 3]) function addNumberToStart() {
array.unshift(number)
setArray(array)
}
function addNumberToEnd() {
array.unshift(number)
setArray(array)
}
return (
<>
{array.join(", ")}
<br />
<button
onClick={() => {
addNumberToStart(0)
addNumberToEnd(0)
console.log(array)
}}
>
Add 0 to Start/End
</button>
</>
)
}
Jika Anda menjalankan kode di atas, Anda akan melihat bahwa kedua fungsi menambahkan nol ke awal dan akhir array. Tapi itu belum menambahkan nol ke array yang tercetak di halaman. Anda dapat terus mengklik tombol tersebut, tetapi UI-nya tetap sama.
Ini karena, di kedua fungsi, Anda mengubah status Anda larik.push(). React secara eksplisit memperingatkan bahwa status harus tidak berubah di React, artinya Anda tidak dapat mengubahnya sama sekali. React menggunakan nilai referensial dengan statusnya.
Solusinya adalah mengakses status saat ini (currentArray), membuat salinan dari status tersebut, dan memperbarui salinan tersebut:
function addNumberToStart(number) {
setArray((currentArray) => {
return [number, ...currentArray]
})
}function addNumberToStart(number) {
setArray((currentArray) => {
return [...currentArray, number]
})
}
Ini adalah metode yang tepat untuk memperbarui status di React. Sekarang ketika Anda mengklik tombol, itu menambahkan nol ke awal dan akhir array. Tetapi yang paling penting, pembaruan akan segera tercermin di halaman.
Konsep JavaScript Penting Lainnya untuk Bereaksi
Artikel ini membahas beberapa kesalahan umum yang harus dihindari saat membuat kode di React. Ketiga kesalahan yang dibahas di sini berasal dari kegagalan memahami JavaScript dengan benar. Karena React adalah framework JavaScript, Anda memerlukan pemahaman yang kuat tentang JavaScript untuk bekerja dengan React. Ini berarti mempelajari konsep-konsep penting yang paling berhubungan dengan pengembangan React.
Artikel Terkait
