Dapatkan Hasil Maksimal dari React Hooks Dengan Praktik Terbaik Ini



Jika Anda baru mengenal React, Anda mungkin bertanya-tanya apa itu React Hooks dan kapan Anda harus menggunakannya. React hanya memperkenalkan kait dalam rilis 16.8 tetapi mereka dengan cepat menjadi fitur penting dari perpustakaan.


Pelajari semua tentang dasar-dasar React Hooks dan temukan beberapa praktik terbaik untuk menggunakannya di aplikasi React Anda.


Apa Itu React Hook?

React Hooks memungkinkan Anda menggunakan status dan fitur React lainnya tanpa menulis kode tambahan. Kait adalah cara yang bagus untuk membuat kode Anda lebih mudah dibaca dan dipelihara.

Ada beberapa Hooks yang berbeda di React, tetapi yang paling umum digunakan adalah useState dan useEffect. Kait useState memungkinkan Anda menambahkan status ke komponen Anda. Ini berguna untuk hal-hal seperti melacak input pengguna atau perubahan pada formulir. Kait useEffect memungkinkan Anda menjalankan fungsi setiap kali komponen dirender. Ini berguna untuk hal-hal seperti mengambil data dari API atau menyiapkan langganan.

Kapan Anda Harus Menggunakan React Hooks?

Anda harus menggunakan React Hooks setiap kali Anda perlu menambahkan fungsionalitas tambahan ke sebuah komponen. Misalnya, jika Anda perlu melacak input pengguna, Anda akan menggunakan kait useState. Jika Anda perlu mengambil data dari API, Anda akan menggunakan kait useEffect. Anda juga dapat membuat kait khusus untuk panggilan API.

Jika Anda baru mulai menggunakan React, Anda mungkin belum perlu menggunakan Hooks. Namun saat Anda membangun aplikasi yang lebih kompleks, Anda akan menemukan bahwa Hooks adalah cara yang bagus untuk menambahkan fungsionalitas ekstra ke komponen Anda.

Praktik Terbaik Dengan React Hooks

Sekarang setelah Anda mengetahui apa itu React Hooks dan kapan menggunakannya, mari kita bicara tentang beberapa praktik terbaik.

1. Hanya Panggil Hooks Dari Fungsi React

Anda hanya boleh memanggil React Hooks dari fungsi React. Jika Anda mencoba memanggil kait reaksi dari komponen kelas, Anda akan mendapatkan kesalahan.

Ini karena Anda hanya dapat memanggil React Hook dari fungsi React. Fungsi React adalah komponen yang Anda deklarasikan dengan kata kunci fungsi.

Berikut adalah contoh komponen fungsi React:

import React, { useState } from 'react';

function App() {
const [count, setCount] = useState(0);

return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Dan inilah contoh komponen kelas:

import React, { Component } from 'react';

class App extends Component {
state = {
count: 0
};

render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}

Contoh pertama mendeklarasikan komponen App menggunakan kata kunci function, sedangkan yang kedua menggunakan kata kunci class.

2. Gunakan Hanya Satu PenggunaanEffect Hook

Jika Anda menggunakan kait useEffect, Anda hanya boleh menggunakan satu per komponen. Ini karena useEffect berjalan setiap kali komponen dirender.

Jika Anda memiliki beberapa kait useEffect, semuanya akan berjalan setiap kali komponen dirender. Hal ini dapat menyebabkan masalah perilaku dan kinerja yang tidak terduga. Dalam contoh di bawah ini, kedua useEffects akan berjalan setiap kali komponen Aplikasi dirender.

import React, { useState, useEffect } from 'react';

function App() {
const [count, setCount] = useState(0);

useEffect(() => {
console.log('This will run whenever the App component renders!');
}, []);

useEffect(() => {
console.log('This will also run whenever the App component renders!');
}, []);

return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Alih-alih menggunakan beberapa kait useEffect, Anda dapat menggunakan satu kait useEffect dan memasukkan semua kode Anda ke dalamnya. Dalam contoh di bawah ini, hanya satu kait useEffect yang akan berjalan setiap kali komponen Aplikasi dirender.

import React, { useState, useEffect } from 'react';

function App() {
const [count, setCount] = useState(0);

useEffect(() => {
console.log('This will run whenever the App component renders!');
console.log('This will also run whenever the App component renders!');
}, []);

return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Ini berarti Anda hanya dapat memanggil React Hooks dari contoh pertama. Jika Anda mencoba memanggil React Hooks dari contoh kedua, Anda akan mendapatkan kesalahan.

3. Gunakan Kait di Level Atas

Salah satu praktik terbaik dengan React Hooks adalah menggunakannya di tingkat atas. Anda harus menghindari penggunaan kait di dalam loop, kondisi, atau fungsi bersarang. Misalnya, jika Anda menggunakan State di dalam for loop, setiap kali loop berjalan, React akan membuat variabel state baru. Ini dapat menyebabkan perilaku yang tidak terduga.

import React, { useState } from 'react';

function App() {
for (let i = 0; i < 10; i++) {
const [count, setCount] = useState(0);
}

return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Dalam contoh di atas, komponen Aplikasi hanya akan merender hitungan dan tombol dari iterasi terakhir perulangan. Ini karena React hanya memperbarui variabel status dari iterasi terakhir.

Alih-alih menggunakan State di dalam loop, Anda bisa mendeklarasikan variabel state di luar loop. Dengan cara ini, React hanya akan membuat satu variabel status dan memperbaruinya sesuai dengan itu.

import React, { useState } from 'react';

function App() {
const [count, setCount] = useState(0);

for (let i = 0; i < 10; i++) {
}

return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

4. Jangan Menggunakan Kait Secara Berlebihan

React Hooks adalah alat yang ampuh, tetapi Anda harus menghindari menggunakannya secara berlebihan. Jika Anda menemukan diri Anda menggunakan beberapa Hook di setiap komponen, Anda mungkin menggunakannya secara berlebihan.

React Hooks paling berguna saat Anda perlu berbagi status di antara beberapa komponen. Hindari penggunaan Hook yang tidak perlu karena dapat membuat kode Anda sulit dibaca, dan dapat memengaruhi kinerja jika digunakan secara berlebihan.

Tambahkan Lebih Banyak Fungsi Menggunakan React 18 Hooks

Dengan dirilisnya React 18, ada hook baru yang tersedia. Setiap hook khusus untuk fitur React tertentu. Anda dapat menemukan daftar semua kait yang tersedia di situs web React. Tetapi kait yang paling umum digunakan masih useState dan useEffect.


https://www.makeuseof.com/react-hooks-best-practices/

Leave a Comment