Cara penggunaan usestate React Hooks – React Native

Cara penggunaan usestate React Hooks – React Native

React meluncurkan hal baru, hal tersebut disebut dengan Hooks, konsep baru ini membantu kita dalam beberapa hal baru, seperti lifecycle methods yang dulunya componentdidmount dan hal lainnya, konsep ini di gunakan tanpa class. Konsep ini di harapkan dapat membantu para developer react dan react native. Di update kali ini memungkinkan anda menggunakan hooks untuk membantu pekerjaan anda, walaupun tentu saja anda tidak harus menerapankan konsep ini

React Hooks konsep ini di bangun oleh React Team untuk melakukan state management dan side effects di dalam function component. Dengan menggunakan Hooks kita bisa menggunakan state dan lifecycle methods tanpa harus menulis class functional di React.

Pada kali ini saya akan mencoba berbagi sedikit bagaimana langkah-langkah cara penggunaan usestate react native hooks dan memberikan info juga yang semoga bisa memberikan sedikit pemahaman apa itu usestate dan bagaimana kegunaannya

Requirements – cara penggunaan usestate hooks react native

Yang anda butuhkan untuk menggunakan hooks, dan yang berada pada tulisan ini adalah sebagai berikut:

  • Terinstall NodeJS above 8.x.x
  • JavaScript/ES6 basics
  • Terinstall watchman
  • Terinstall react-native-cli

Apa itu react – native hooks?

Pertama buat project baru dengan react-native init

untuk penjelasan lebih lengkap bagaimana membuat project baru bisa di click di sini

React native hooks – Konsep ini adalah fungsi yang memungkinkan anda menggunakan react state dan component’s lifecycle methods dengan functional component, hooks tidak berfungsi menggunakan class. Bila anda sudah sering bermain dengan react mungkin anda familiar bahwa functional component di sebut juga functional stateless component, tapi sekarang tidak begitu. Dahulu hanya dengan class component anda bisa menggunakan local state, tapi semenjak ada hooks ada bisa melakukannya dengan functional component. React menyediakan beberapa hooks bawaan yaitu: useEffect dan useState, pada kali ini kita akan membahas useState terlebih dahulu.

Penerapan Hooks pada React Native

Kita akan memulai dengan contoh paling standart yang pernah ada, seperti di atas. Seperti code contoh di atas, kamu memulai dengan importing usestate dari react library, di react hooks ini menjadikan anda dapat menggunkan local state dalam functional components. Coba perhatikan contoh code di atas, di sana tertulis export default function App(), bukannya di tulis menggunakan cara tradisional seperti class component yang biasanya di gunakan. Pada code di atas kita mempuya state dengan bentuk const [count, setCount] = useState(0)dan mempunya function di dalam button component setCount(Count + 1)

Hal ini sama dengan menggunakan this.state, dan bila anda ingin merubah nilai dari count anda harus melalui setcount

Hasil dari code di atas sebagai berikut:

cara penggunaan usestate

bila anda menclick tombol anda akan melihat angka yang terus bertambah

Simpan Value Pada useState

Misalnya anda baru saja fetch data menggunakan axios pada react, anda ingin menaruhnya pada this.state bila menggunkan class akan seperti ini dan bisa di bandingkan bila anda menggunakan usestate

pada contoh di atas kita melakukan fetch data menggunakan axios dan menampung hasilnya pada value, dan value tersebut di tampung pada state, untuk memasukannya bisa di lihat pada contoh di atas dan perbedaan pada this.state dan usestate. Perlu di ingat bila ingin menggunakan usestate atau hooks anda tidak perlu dan malah tidak bisa menggunakan class component tapi anda bisa menggunkan functional component yang lebih clean dan hebat tenaga dalam ngetik hehe

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *