Apa Itu Hooks Pada React Atau React Native

Hooks adalah tambahan baru dalam React 16.8. Mereka membiarkan Anda menggunakan State dan fitur React lainnya tanpa menulis dalam komponent Kelas.

React Native Hooks
React Native Hooks

Kenapa Menggunakan Hooks Pada React Atau React Native

Hooks memecahkan berbagai macam masalah yang tampaknya tidak berhubungan dalam React yang telah kami temui selama lima tahun menulis dan mempertahankan puluhan ribu komponen. Apakah Anda belajar React, menggunakannya setiap hari, atau bahkan lebih suka Library yang berbeda dengan model komponen yang serupa, Anda mungkin mengenali beberapa masalah ini.
Berikut Alasan Untuk Menggunakan React Native Hooks :
  • Sulit untuk menggunakan kembali stateful logic antar komponen pada Class React
  • Komponen kompleks menjadi sulit dipahami Pada Class React
  • Class membingungkan Programer dan

Lifecycle  React Native Hooks 

1. UseState
UseState adalah salah satu lifecyle pada React Hooks yang berfungsi untuk merubah state pada komponen React, dengan menggunakan UseSate kamu tidak perlu mendifiniskan constructor dan kodingannya akan menjadi lebih sedikit. 

Pertama silahkan buat sebuah project baru React Native : npx react-native init hooks_learn
Setelah itu ubah kode di App.js menjadi seperti di bawah ini :




2. UseEffect
 UseEffect pada React Hooks seperti ComponentDidMount dan ComponentWillUnmount jadi dengan menggunakan UseEffect penulisan kode nya jadi lebih simple dan clean. Berikut contoh kode untuk UseEffect

UseEffect Dengan Unmount (Clean Up)

Note : Untuk ComponentDidUpdate penulisannya juga sama dengan UseEffect dengn UnMount

3. useContext
Menerima objek konteks (nilai yang dikembalikan dari React.createContext) dan mengembalikan nilai konteks saat ini untuk konteks itu. Nilai konteks saat ini ditentukan oleh penyangga nilai <MyContext.Provider> terdekat di atas komponen panggilan di hierarki.
Intinya useContext digunakan untuk mengirim props pada functional style di Hooks React Native, jika kita menggunakan Classes Component kita bisa langsung mengirim props ke child yang lain.

Berikut contoh penggunaan useContext pada React Native:

4.useCallback dan  useMemo 

 useCallback: useCallback akan mengembalikan versi panggilan balik dari memoise yang hanya berubah jika salah satu dari dependensi telah berubah. Ini berguna ketika meneruskan panggilan balik ke komponen turunan optimal yang mengandalkan kesetaraan referensi untuk mencegah perenderan yang tidak perlu (mis. ShouldComponentUpdate).

useMemo :  Mengirim function "create" dan berbagai dependensi. useMemo hanya akan menghitung ulang nilai memoized ketika salah satu dependensi telah berubah. Optimalisasi ini membantu menghindari perhitungan mahal pada setiap render.

Ingatlah bahwa fungsi yang diteruskan ke useMemo berjalan selama rendering. Jangan melakukan apa pun di sana yang biasanya tidak Anda lakukan saat merender. Misalnya, dalam useEffect, bukan useMemo.

Contoh penggunaan useCallback dan  useMemo :
5. useRef
Refs menyediakan cara untuk mengakses node DOM atau Bereaksi elemen yang dibuat dalam metode render.

Kapan Menggunakan Ref
Ada beberapa kasus penggunaan yang baik untuk referensi:
  • Mengelola fokus, pemilihan teks, atau pemutaran media.
  • Memicu animasi imperatif.
  • Integrasi dengan perpustakaan DOM pihak ketiga.
Contoh penggunaan Ref pada React Hooks:

Sekian semoga Tutorial Hooks Pada React ini dapat bermanfaat dan membantu kamu yang sedang mempelajari React Hooks, apabila ada pertanyaa mengenai React Hooks di artikel ini kamu bisa menuliskan pertanyaan kamu di kolom komentar.

Baca Tutorial Lainnya: