Aturan 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 aturan 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.
Aturan-aturan ini dikenal sebagai Aturan React. Ini adalah aturan, bukan sekadar pedoman, yang dalam artian jika aturan 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 Aturan React. Dengan mengikuti Aturan 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 aturan 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.
Aturan 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 Aturan Hooks saat menggunakannya.
- Panggil Hooks hanya di tingkat teratas – 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.