Peraturan React
Sama seperti bahasa pemrograman lain yang memiliki cara tersendiri untuk mengekspresikan konsep, React memiliki idiom atau aturannya sendiri untuk menulis pola dengan cara yang mudah dipahami dan menghasilkan aplikasi berkualitas tinggi.
Bagian ini menjelaskan peraturan yang perlu Anda ikuti untuk menulis kode React yang idiomatis. Menulis kode React yang idiomatis dapat membantu Anda menulis aplikasi yang terorganisisasi dengan baik, aman, dan dapat disusun. Hal ini membuat aplikasi Anda lebih tahan terhadap perubahan dan memudahkan bekerja dengan pengembang, pustaka (library), dan alat lain.
Peraturan ini dikenal sebagai Peraturan React. Ini adalah aturan, bukan sekadar pedoman, yang dalam artian jika peraturan tersebut dilanggar, kemungkinan besar aplikasi Anda memiliki bug. Kode Anda juga menjadi tidak idiomatis dan lebih sulit untuk dipahami dan dipikirkan.
Kami sangat merekomendasikan penggunaan Strict Mode bersama dengan plugin ESLint untuk React, untuk membantu basis kode (codebase) Anda mematuhi Peraturan React. Dengan mengikuti Peraturan React, Anda akan dapat menemukan dan mengatasi bug ini dan menjaga aplikasi Anda tetap dapat dipelihara.
Komponen dan Hooks harus murni
Kemurnian dalam Komponen dan Hooks adalah peraturan utama React yang membuat aplikasi Anda dapat diprediksi, mudah di-debug, dan memungkinkan React mengoptimalkan kode Anda secara otomatis.
- Komponen harus idempotent – Komponen React diasumsikan selalu mengembalikan output yang sama terkait dengan inputnya – props, state, dan context.
- Efek samping harus dijalankan di luar render – Efek samping tidak boleh dijalankan dalam render, karena React dapat me-render komponen beberapa kali untuk menciptakan pengalaman pengguna sebaik mungkin.
- Props dan state adalah sesuatu yang immutable – Props dan state suatu komponen adalah snapshot yang immutable untuk sekali render. Jangan pernah mengubahnya secara langsung.
- Nilai kembalian dan argumen ke Hooks adalah sesuatu yang immutable – Setelah nilai dioper ke sebuah Hook, Anda tidak boleh mengubahnya. Seperti props dalam JSX, nilai menjadi immutable saat dioper ke Hook.
- Nilai menjadi immutable setelah dioper ke JSX – Jangan ubah nilai setelah digunakan di JSX. Pindahkan perubahan (mutation) sebelum JSX dibuat.
React memanggil Komponen dan Hooks
React bertanggung jawab untuk me-render komponen-komponen dan hooks bila diperlukan untuk mengoptimalkan pengalaman pengguna. React bersifat deklaratif: Anda memberi tahu React apa yang akan di-render dalam logika komponen Anda, dan React akan menentukan cara terbaik untuk menampilkannya kepada pengguna Anda.
- Jangan pernah memanggil fungsi komponen secara langsung – Komponen hanya boleh digunakan di JSX. Jangan panggil mereka sebagai fungsi biasa.
- Jangan pernah mengoper hooks sebagai nilai biasa – Hooks hanya boleh dipanggil di dalam komponen. Jangan pernah mengopernya sebagai nilai biasa.
Peraturan Hooks
Meskipun Hooks ditulis menggunakan fungsi JavaScript, mereka memiliki fungsi khusus sebagai logika antarmuka yang dapat digunakan kembali. Namun, ada batasan terkait saat Anda bisa menggunakan Hook. Anda perlu mematuhi Peraturan Hooks saat menggunakannya.
- Panggil Hooks hanya di tingkat atas – Jangan panggil Hooks di dalam perulangan (loop), kondisi (if/else), atau fungsi bersarang. Sebagai gantinya, selalu gunakan Hooks di level paling atas fungsi React Anda, sebelum kembalian awal (jika ada).
- Panggil Hooks hanya dari fungsi React – Jangan panggil Hooks dari fungsi JavaScript biasa.