Kait di React JS dan mengapa kita membutuhkannya?

kait

Hooks adalah fitur baru yang diperkenalkan di React 16.8 yang memungkinkan pengembang untuk menggunakan status dan fitur React lainnya dalam komponen fungsional tanpa menggunakan kelas (komponen Kelas).
Mereka adalah fungsi yang memungkinkan Anda menggunakan status dan fitur React lainnya seperti konteks dan metode siklus hidup di dalam komponen fungsional.

Sebelum Hooks di Bereaksi

Sebelum hook diperkenalkan, komponen fungsional di React tidak dapat memiliki status, dan tidak dapat menggunakan metode siklus hidup. Untuk menggunakan fitur ini, pengembang harus mengubah komponen fungsional menjadi komponen kelas. Ini menambah kerumitan yang tidak perlu dan membuat kode lebih sulit untuk dibaca dan dipelihara.

Sekarang jauh lebih mudah untuk membuat komponen fungsional dengan lebih banyak kontrol atas komponen kelas yang sulit dipahami dan dipertahankan untuk pemula. Bahkan pengembang ahli React lebih suka menggunakan komponen fungsional daripada Komponen Bereaksi.

Setelah Hooks dalam versi React JS (16.8).

Dengan diperkenalkannya hook, komponen fungsional sekarang dapat menggunakan metode state dan lifecycle tanpa mengubahnya menjadi komponen kelas. Ini membuat kode lebih sederhana, lebih mudah dibaca, dan lebih mudah dipelihara.

Hooks yang paling umum digunakan di React JS

Beberapa hook yang umum digunakan di React adalah:
1. gunakanState
Pengait ini digunakan untuk menambahkan status ke komponen fungsional. Dibutuhkan nilai awal sebagai argumen dan mengembalikan array dengan dua elemen: nilai status saat ini dan fungsi untuk memperbaruinya.

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

Dalam contoh di atas, status hitungan diinisialisasi ke 0, dan fungsi setCount digunakan untuk memperbaruinya.

2. gunakanEfek
Pengait ini digunakan untuk melakukan efek samping pada komponen fungsional. Ini mirip dengan gabungan componentDidMount, componentDidUpdate, dan componentWillUnmount. Anda dapat menggunakannya untuk mengambil data, memanipulasi DOM, atau melakukan efek samping lainnya yang memerlukan akses ke status komponen.

useEffect(() => { document.title = `You clicked ${count} times`;
}, [count]);

Pada contoh di atas, hook useEffect digunakan untuk memperbarui judul dokumen setiap kali status hitungan berubah.

3. gunakan Konteks
Pengait ini digunakan untuk menggunakan konteks yang dibuat oleh API createContext. Ini memungkinkan Anda untuk mengakses nilai yang diberikan oleh yang terdekat Penyedia komponen.

const value = useContext(MyContext);

Pada contoh di atas, hook useContext digunakan untuk mengakses nilai yang disediakan oleh penyedia MyContext.

Kait Khusus:

Hook juga dapat dibuat untuk mengenkapsulasi dan menggunakan kembali logika stateful di seluruh komponen. Ini disebut kait khusus.

function useCustomHook() {
const [count, setCount] = useState(0); useEffect(() => { console.log(`You clicked ${count} times`);
}, [count]); return [count, setCount];
} function Component1() {
const [count, setCount] = useCustomHook(); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
);
} function Component2() {
const [count, setCount] = useCustomHook(); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count - 1)}> Click me </button> </div>
);
}

Pada contoh di atas, fungsi useCustomHook digunakan untuk mengenkapsulasi state dan logika useEffect, lalu digunakan kembali dalam dua komponen terpisah.

Kesimpulan

Singkatnya, hook adalah fitur yang kuat di React yang memungkinkan pengembang untuk menggunakan status dan fitur React lainnya di dalam komponen fungsional. Mereka menyederhanakan kode, membuatnya lebih mudah dibaca dan dipelihara, dan mendorong penggunaan kembali logika stateful di seluruh komponen.

Hooks tidak bisa bersyarat dan hanya bisa digunakan pada komponen fungsional. Apalagi jika Anda menggunakan hook pada komponen fungsional maka Anda tidak lagi membutuhkan class component.

Jika Anda menyukai artikel tentang Hooks in React ini, klik suka dan ikuti untuk konten lainnya seperti ini.
Silakan ajukan pertanyaan apa pun dan sarankan topik untuk ditulis untuk Anda.

Terimakasih atas dukunganmu. Tetap Terberkati!

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://www.codementor.io/rizatech/hooks-in-react-js-and-why-we-need-them-23e0e3fhz5