Kapan Menggunakan API Imperatif dan Deklaratif

React mendorong gaya deklaratif: Anda menjelaskan seperti apa tampilan antarmuka untuk status tertentu, lalu React menyesuaikan DOM agar sesuai. Sebagian besar perilaku mengalir melalui properti dan status, bukan melalui perintah DOM langsung.

Model ini membuat antarmuka dapat diprediksi karena keluaran yang dirender merupakan fungsi murni dari status, bukan hasil dari serangkaian perubahan manual.

Beberapa interaksi sulit dinyatakan sepenuhnya secara deklaratif. Memfokuskan elemen secara imperatif, memicu animasi pada saat yang tepat, atau mengendalikan widget DOM pihak ketiga sering kali tidak dapat direpresentasikan dengan rapi sebagai fungsi dari status.

Untuk kasus-kasus ini, React menyediakan jalan keluar seperti referensi dan pegangan imperatif, yang digunakan secara terbatas ketika properti deklaratif tidak mencukupi.

API imperatif memiliki konsekuensi. API ini lebih sulit diuji karena Anda harus menjalankan metode dan mengamati efek samping, serta dapat merusak aliran data satu arah yang membuat aplikasi React mudah dipahami.

Panggilan imperatif juga cenderung menyebarkan perilaku ke berbagai penangan peristiwa, alih-alih memusatkannya dalam pemetaan status-ke-antarmuka yang jelas, sehingga biaya pemeliharaan meningkat.

Utamakan API deklaratif dan gunakan API imperatif hanya untuk interaksi serta pengukuran: fokus, pengguliran, animasi, pemutaran media, dan pembacaan ukuran atau posisi.

Jika sesuatu dapat dimodelkan sebagai status yang dipetakan ke keluaran yang dirender, lakukanlah dengan cara itu. Jika sesuatu merupakan tindakan sesaat tanpa representasi status yang jelas, pegangan imperatif adalah pilihan yang tepat.

Modal deklaratif dirender berdasarkan properti isOpen yang dimiliki komponen induk, sehingga visibilitasnya dikendalikan oleh status. Modal imperatif menyediakan metode untuk membuka dan menutup, serta menyembunyikan statusnya sendiri di balik pegangan.

Versi deklaratif lebih sesuai dengan alur data React dan biasanya lebih disukai, sedangkan versi imperatif dapat lebih praktis ketika pemicunya berasal dari kode yang tersebar dan digerakkan oleh peristiwa.

Anda dapat menyetel ulang formulir secara deklaratif dengan mengubah properti kuncinya, yang memaksa React memasangnya kembali dari awal dengan status bawaan. Tidak diperlukan panggilan imperatif.

Alternatif imperatifnya menyediakan metode penyetelan ulang pada pegangan. Trik properti kunci sering kali lebih bersih karena memanfaatkan rekonsiliasi React, bukan penghapusan status secara manual.

Perute Next.js menyediakan metode imperatif seperti mendorong, mengganti, dan mengambil di awal. Mengambil rute lebih awal sebelum navigasi yang kemungkinan terjadi merupakan tindakan, bukan bagian dari status perenderan, sehingga panggilan imperatif cocok digunakan.

Hal ini menunjukkan bahwa perkakas React yang mengikuti pola umum pun menggunakan API imperatif ketika operasinya pada dasarnya merupakan tindakan yang dipicu pada suatu waktu.

Panduan resmi menggambarkan referensi dan pegangan imperatif sebagai jalan keluar, yaitu alat untuk keluar dari model deklaratif ketika Anda benar-benar harus melakukannya. Keduanya bukan cara bawaan untuk membangun fitur.

Mempertahankan pola pikir ini mencegah penggunaan berlebihan: gunakan jalan keluar hanya setelah memastikan bahwa properti dan status tidak dapat menyatakan perilaku tersebut dengan rapi.

Sebelum menambahkan pegangan imperatif, tanyakan: apakah ini dapat berupa status yang dipetakan ke antarmuka? Jika ya, tetaplah deklaratif. Apakah ini merupakan tindakan fokus, pengguliran, pengukuran, animasi, atau tindakan pihak ketiga? Jika ya, penggunaan imperatif mungkin dapat dibenarkan.

Pastikan juga permukaannya kecil dan terdokumentasi, serta Anda tidak menggunakan referensi hanya untuk meneruskan data yang sebenarnya dapat dibawa oleh properti.

Aplikasi nyata memadukan kedua pendekatan. Sebagian besar logika tetap deklaratif, dengan lapisan tipis pegangan imperatif untuk sejumlah kecil interaksi yang membutuhkannya.

Menemukan keseimbangan ini membuat kode Anda dapat diprediksi dan diuji, sekaligus memungkinkan Anda menangani pengelolaan fokus, kendali media, dan integrasi pustaka ketika kode deklaratif tidak dapat menjangkaunya.

Pilih kapan API imperatif merupakan alat yang tepat.

React secara bawaan menggunakan antarmuka deklaratif yang digerakkan oleh properti dan status, sehingga dapat diprediksi dan diuji. Pegangan imperatif tersedia sebagai jalan keluar untuk fokus, pengguliran, animasi, pengukuran, dan kendali DOM pihak ketiga.

Bandingkan modal deklaratif dan imperatif, utamakan properti kunci untuk menyetel ulang formulir, dan ingat bahwa perute Next.js pun menggunakan metode imperatif untuk berbagai tindakan. Jaga agar lapisan imperatif tetap kecil, terdokumentasi, dan memiliki alasan yang jelas.