React adalah salah satu kerangka kerja front-end paling populer untuk JavaScript. Tidak seperti kerangka kerja lain seperti Angular, ini sangat tidak masuk akal. Oleh karena itu, terserah Anda untuk memutuskan bagaimana Anda ingin menulis atau menyusun kode React Anda.

Artikel ini mengeksplorasi beberapa praktik yang harus Anda ikuti untuk meningkatkan kinerja aplikasi React Anda.

1. Menggunakan Komponen Fungsional dan Kait Alih-alih Kelas

Di React, Anda bisa gunakan kelas atau komponen fungsional dengan kait. Namun, Anda harus lebih sering menggunakan komponen fungsional dan kait karena menghasilkan kode yang lebih ringkas dan mudah dibaca dibandingkan dengan kelas.

Perhatikan komponen kelas berikut yang menampilkan data dari API NASA.

kelas NASAData memperluas Bereaksi. Komponen {
 konstruktor (alat peraga) {
 super (alat peraga);
 ini.status = {
 data: [],
 };
 }
 componentDidMount() {
 mengambil(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .kemudian((json) => {





instagram viewer


 this.setState({
 data: json,
 });
 });
 }
 render() {
 const { data } = this.state;
 jika (!data.panjang)
 kembali (


 Mengambil data... 
{" "}



 );
 kembali (
 <>
 Ambil data menggunakan komponen Kelas 
{" "}
 {data.peta((item) => (
{nama barang}

 ))}
 );
 }
}

Komponen yang sama dapat ditulis menggunakan kait.

const NasaData = () => {
 const [data, setdata] = useState (null);
 useEffect(() => {
 mengambil(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .kemudian((json) => {
 set data (json);
 });
 }, [data]);
 kembali (
 <>
 Ambil data menggunakan komponen Kelas 
{" "}
 {data.peta((item) => (
{nama barang}

 ))}
 );
};

Meskipun blok kode di atas melakukan hal yang sama seperti komponen kelas, blok kode tersebut kurang kompleks, minimal, dan mudah dipahami yang berkontribusi pada pengalaman pengembang yang lebih baik.

2. Hindari Menggunakan Status (Jika Mungkin)

Status React melacak data yang ketika diubah akan memicu komponen React untuk dirender ulang. Saat membangun aplikasi React, hindari penggunaan status sebanyak mungkin karena semakin banyak status yang Anda gunakan, semakin banyak data yang harus Anda lacak di seluruh aplikasi Anda.

Salah satu cara untuk meminimalkan penggunaan state adalah dengan mendeklarasikannya hanya jika diperlukan. Misalnya, jika Anda mengambil data pengguna dari API, simpan seluruh objek pengguna dalam status alih-alih menyimpan properti individual.

Alih-alih melakukan ini:

const [nama pengguna, setusername] = useState('')
const [kata sandi, set kata sandi] = useState('')

Melakukan hal ini:

const [pengguna, setuser] = useState({})

Ketika memutuskan struktur proyek, pilih yang berpusat pada komponen. Ini berarti memiliki semua file tentang satu komponen dalam satu folder.

Jika Anda membuat navigasi komponen, buat folder bernama bilah navigasi mengandung navigasi komponen itu sendiri, lembar gaya, dan JavaSript dan file aset lainnya yang digunakan dalam komponen.

Satu folder yang berisi semua file komponen memudahkan untuk digunakan kembali, dibagikan, dan di-debug. Jika Anda perlu melihat cara kerja komponen, Anda hanya perlu membuka satu folder.

4. Hindari Menggunakan Indeks sebagai Alat Peraga Utama

React menggunakan kunci untuk mengidentifikasi item dalam array secara unik. Dengan kunci, React dapat menunjukkan dengan tepat item mana yang telah diubah, ditambahkan, atau dihapus dari array.

Sebagian besar waktu saat merender array, Anda mungkin menggunakan indeks sebagai kuncinya.

const Item = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 kembali (
 <>
 {arr.map((elemen, indeks) => {
{elemen}
;
 })}
 );
};

Meskipun ini terkadang berhasil, menggunakan indeks sebagai kunci dapat menimbulkan masalah terutama jika daftarnya diperkirakan akan berubah. Pertimbangkan daftar ini.

const arr = ["item1", "item2", "item3", "item4", "item5"];

Saat ini, item daftar pertama, “Barang 1” berada di indeks nol, tetapi jika Anda menambahkan item lain di awal daftar, “Barang 1” index akan berubah menjadi 1 yang mengubah perilaku array Anda.

Solusinya adalah dengan menggunakan nilai unik sebagai indeks untuk memastikan bahwa identitas item daftar dipertahankan.

5. Pilih Fragmen Alih-alih Div Jika Memungkinkan

Komponen React perlu mengembalikan kode yang dibungkus dalam satu tag biasanya sebagai atau fragmen React. Anda harus memilih fragmen jika memungkinkan.

Menggunakan meningkatkan ukuran DOM, terutama dalam proyek besar karena semakin banyak tag atau simpul DOM yang Anda miliki, semakin banyak memori yang dibutuhkan situs web Anda dan semakin besar daya yang digunakan browser untuk memuat situs web Anda. Hal ini menyebabkan kecepatan halaman yang lebih rendah dan pengalaman pengguna yang berpotensi buruk.

Salah satu contoh menghilangkan yang tidak perlu tag tidak menggunakannya saat mengembalikan satu elemen.

const Tombol = () => {
 kembali Menampilkan;
};

6. Ikuti Konvensi Penamaan

Anda harus selalu menggunakan PascalCase saat memberi nama komponen untuk membedakannya dari file JSX non-komponen lainnya. Sebagai contoh: Bidang Teks, NavMenu, dan Tombol Sukses.

Gunakan camelCase untuk fungsi yang dideklarasikan di dalam komponen React seperti menanganiMasukan() atau acaraElemen().

7. Hindari Kode Berulang

Jika Anda melihat Anda sedang menulis kode duplikat, ubah menjadi komponen yang dapat digunakan kembali.

Misalnya, lebih masuk akal untuk membuat komponen untuk menu navigasi Anda daripada berulang kali menulis kode di setiap komponen yang memerlukan menu.

Itulah keuntungan dari arsitektur berbasis komponen. Anda dapat memecah proyek menjadi komponen-komponen kecil yang dapat digunakan kembali di seluruh aplikasi Anda.

8. Gunakan Penghancuran Objek Untuk Alat Peraga

Alih-alih melewati objek props, gunakan objek destructuring untuk meneruskan nama prop. Ini menghilangkan kebutuhan untuk merujuk ke objek props setiap kali Anda perlu menggunakannya.

Sebagai contoh, berikut ini adalah komponen yang menggunakan props apa adanya.

const Tombol = (alat peraga) => {
 kembali {alat peraga.teks};
};

Dengan perusakan objek, Anda merujuk ke teks secara langsung.

const Tombol = ({teks}) => {
 kembali {teks};
};

9. Render Array Secara Dinamis Menggunakan Peta

Menggunakan peta() untuk secara dinamis membuat blok HTML berulang. Misalnya, Anda dapat menggunakan peta() untuk membuat daftar item di tag.

const Item = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 kembali (
 <>
 {arr.map((elemen, indeks) => {
{elemen}
;
 })}
 );
 };

Untuk tujuan perbandingan, berikut adalah bagaimana Anda dapat membuat daftar tanpa peta(). Pendekatan ini sangat berulang.

const Daftar = () => {
 kembali (


Barang 1

Item2

Item3

Item4

Item5




 );
};

10. Tulis Tes untuk Setiap Komponen Bereaksi

Tulis tes untuk komponen yang Anda buat karena mengurangi kemungkinan kesalahan. Pengujian memastikan bahwa komponen berperilaku seperti yang Anda harapkan. Salah satu kerangka kerja pengujian paling umum untuk React adalah Jest, dan menyediakan lingkungan di mana Anda dapat menjalankan pengujian Anda.

Meskipun React agak fleksibel dalam hal bagaimana Anda dapat menggunakannya, mengikuti praktik khusus akan membantu Anda mendapatkan hasil maksimal dari pengalaman Anda.

Saat mengikuti tip ini, ingatlah proyek dan tujuan khusus Anda; beberapa akan lebih relevan dalam kasus tertentu daripada yang lain.

Cara Mengkonsumsi API di React Menggunakan Fetch dan Axios

Ingin tahu cara menggunakan API? Memahami cara menggunakan API di React adalah elemen kunci dari penggunaan API.

Baca Selanjutnya

Tentang Penulis