Memulai Dengan React Hooks API

Diterbitkan: 2022-03-10
Ringkasan cepat Dalam tutorial ini, Anda akan mempelajari dan memahami apa itu React Hooks, React Hooks dasar yang tersedia dan juga contoh bagaimana menulisnya untuk aplikasi React Anda. Dalam prosesnya, Anda juga akan mengetahui tentang beberapa kait tambahan yang dikirimkan bersama React 16.8 dan juga cara menulis React Hooks kustom Anda sendiri.

Ketika React 16.8 dirilis secara resmi pada awal Februari 2019, React dikirimkan dengan API tambahan yang memungkinkan Anda menggunakan status dan fitur lainnya di React tanpa menulis kelas. API tambahan ini disebut Hooks dan menjadi populer di ekosistem React, dari proyek open-source hingga digunakan dalam aplikasi produksi.

React Hooks sepenuhnya opt-in yang berarti bahwa penulisan ulang kode yang ada tidak diperlukan, mereka tidak mengandung perubahan yang melanggar, dan mereka tersedia untuk digunakan dengan rilis React 16.8. Beberapa pengembang yang penasaran telah menggunakan Hooks API bahkan sebelum dirilis secara resmi, tetapi saat itu tidak stabil dan hanya fitur eksperimental. Sekarang sudah stabil dan direkomendasikan untuk digunakan oleh pengembang Bereaksi.

Catatan : Kami tidak akan berbicara tentang React atau JavaScript secara umum. Pengetahuan yang baik tentang ReactJS dan JavaScript akan berguna saat Anda mengerjakan tutorial ini.

Apa Itu React Hook?

React Hooks adalah fungsi bawaan yang memungkinkan pengembang React menggunakan metode status dan siklus hidup di dalam komponen fungsional, mereka juga bekerja sama dengan kode yang ada, sehingga dapat dengan mudah diadopsi ke dalam basis kode. Cara Hooks diperkenalkan ke publik adalah bahwa mereka memungkinkan pengembang untuk menggunakan status dalam komponen fungsional tetapi di bawah tenda, Hooks jauh lebih kuat dari itu. Mereka memungkinkan Pengembang Bereaksi untuk menikmati manfaat berikut:

  • Penggunaan kembali kode yang ditingkatkan;
  • Komposisi kode yang lebih baik;
  • Default yang lebih baik;
  • Berbagi logika non-visual dengan penggunaan kait khusus;
  • Fleksibilitas dalam bergerak naik turun pohon components .

Dengan React Hooks, pengembang mendapatkan kekuatan untuk menggunakan komponen fungsional untuk hampir semua hal yang perlu mereka lakukan mulai dari hanya merender UI hingga juga menangani status dan juga logika — yang cukup rapi.

Motivasi Dibalik Pelepasan React Hooks

Menurut dokumentasi resmi ReactJS, berikut adalah motivasi di balik rilis React Hooks:

  • Menggunakan kembali logika stateful antar komponen sulit dilakukan.
    Dengan Hooks, Anda dapat menggunakan kembali logika antar komponen tanpa mengubah arsitektur atau strukturnya.
  • Komponen kompleks bisa sulit untuk dipahami.
    Ketika komponen menjadi lebih besar dan melakukan banyak operasi, menjadi sulit untuk dipahami dalam jangka panjang. Hooks memecahkan masalah ini dengan memungkinkan Anda memisahkan satu komponen tertentu menjadi berbagai fungsi yang lebih kecil berdasarkan bagian mana dari komponen terpisah ini yang terkait (seperti menyiapkan langganan atau mengambil data), daripada harus memaksakan pemisahan berdasarkan metode siklus hidup.
  • Kelas cukup membingungkan.
    Kelas adalah penghalang untuk belajar Bereaksi dengan benar; Anda perlu memahami bagaimana this dalam JavaScript bekerja yang berbeda dari bahasa lain. React Hooks memecahkan masalah ini dengan mengizinkan pengembang untuk menggunakan fitur terbaik dari React tanpa harus menggunakan kelas.
Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Aturan Kait

Ada dua aturan utama yang harus dipatuhi secara ketat seperti yang dinyatakan oleh tim inti React yang dituangkan dalam dokumentasi proposal hooks.

  • Pastikan untuk tidak menggunakan Hooks di dalam loop, kondisi, atau fungsi bersarang;
  • Hanya gunakan Hooks dari dalam React Functions.

Kait React Dasar

Ada 10 kait bawaan yang dikirimkan dengan React 16.8 tetapi kait dasar (umum digunakan) meliputi:

  • useState()
  • useEffect()
  • useContext()
  • useReducer()

Ini adalah 4 hook dasar yang biasa digunakan oleh developer React yang telah mengadopsi React Hooks ke dalam basis kode mereka.

useState()

useState() memungkinkan pengembang React untuk memperbarui, menangani, dan memanipulasi status di dalam komponen fungsional tanpa perlu mengubahnya menjadi komponen kelas. Mari kita gunakan cuplikan kode di bawah ini adalah komponen penghitung usia sederhana dan kita akan menggunakannya untuk menjelaskan kekuatan dan sintaks dari kait useState() .

 function App() { const [age, setAge] = useState(19); const handleClick = () => setAge(age + 1) return <div> I am {age} Years Old <div> <button onClick={handleClick}>Increase my age! </button> </div> </div> }

Jika Anda perhatikan, komponen kita terlihat cukup sederhana, ringkas dan sekarang menjadi komponen fungsional dan juga tidak memiliki tingkat kerumitan seperti yang dimiliki komponen kelas.

useState() menerima status awal sebagai argumen dan kemudian kembali, dengan memanfaatkan destrukturisasi array dalam JavaScript, kedua variabel dalam array dapat diberi nama apa. Variabel pertama adalah keadaan sebenarnya, sedangkan variabel kedua adalah fungsi yang dimaksudkan untuk memperbarui keadaan dengan memberikan keadaan baru.

Aplikasi React kami yang telah selesai (Pratinjau besar)

Beginilah seharusnya komponen kita terlihat saat dirender di aplikasi React kita. Dengan mengklik tombol “Tingkatkan Usia Saya”, status usia akan berubah dan komponen akan bekerja seperti komponen kelas dengan status.

useEffect()

useEffect() menerima fungsi yang akan berisi kode yang efektif. Dalam komponen fungsional, efek seperti mutasi, langganan, timer, logging, dan efek lainnya tidak boleh ditempatkan di dalam komponen fungsional karena hal itu akan menyebabkan banyak inkonsistensi saat UI dirender dan juga membingungkan bug.

Dalam menggunakan kait useEffect() , fungsi efektif yang diteruskan ke dalamnya akan dieksekusi tepat setelah render ditampilkan di layar. Efek pada dasarnya mengintip cara imperatif membangun UI yang sangat berbeda dari cara fungsional React.

Secara default, efek dijalankan terutama setelah render selesai, tetapi Anda juga memiliki opsi untuk mengaktifkannya saat nilai tertentu berubah.

useEffect() sebagian besar berperan untuk efek samping yang biasanya digunakan untuk interaksi dengan Browser/DOM ​​API atau pengambilan data atau langganan seperti API eksternal. Selain itu, jika Anda sudah terbiasa dengan cara kerja metode siklus hidup React, Anda juga dapat menganggap hook useEffect() sebagai komponen pemasangan , pembaruan , dan pelepasan — semuanya digabungkan dalam satu fungsi. Ini memungkinkan kita mereplikasi metode siklus hidup dalam komponen fungsional.

Kami akan menggunakan cuplikan kode di bawah ini untuk menjelaskan cara paling dasar yang dapat kami lakukan dengan menggunakan kait useEffect() .

Langkah 1: Tentukan Status Aplikasi Anda

 import React, {useState} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

Sama seperti yang telah kita bahas di bagian sebelumnya tentang cara menggunakan kait useState() untuk menangani status di dalam komponen fungsional, kami menggunakannya dalam cuplikan kode untuk menyetel status aplikasi yang membuat nama lengkap saya.

Langkah 2: Panggil Kait useEffect

 import React, {useState, useEffect} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); //Call the use effect hook useEffect(() => { setName({FirstName: 'Shedrack', surname: 'Akintayo'}) }, [])//pass in an empty array as a second argument return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

Kami sekarang telah mengimpor kait useEffect dan juga memanfaatkan fungsi useEffect() untuk mengatur status properti nama dan nama keluarga kami yang cukup rapi dan ringkas.

Anda mungkin telah memperhatikan kait useEffect dalam argumen kedua yang merupakan array kosong; ini karena berisi panggilan ke setFullName yang tidak memiliki daftar dependensi. Meneruskan argumen kedua akan mencegah rantai pembaruan tak terbatas ( componentDidUpdate() ) dan juga akan memungkinkan kait useEffect() kami untuk bertindak sebagai metode siklus hidup componentDidMount dan merender sekali tanpa merender ulang pada setiap perubahan di pohon.

Aplikasi React kami sekarang akan terlihat seperti ini:

React aplikasi menggunakan useEffect Hook (Pratinjau besar)

Kita juga dapat menggunakan mengubah properti title aplikasi kita di dalam fungsi useEffect() dengan memanggil fungsi setTitle() , seperti:

 import React, {useState, useEffect} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); //Call the use effect hook useEffect(() => { setName({firstName: 'Shedrack', surname: 'Akintayo'}) setTitle({'My Full Name'}) //Set Title }, [])// pass in an empty array as a second argument return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

Sekarang setelah aplikasi kami dirender, sekarang menunjukkan judul baru.

Proyek selesai kami (Pratinjau besar)

useContext()

useContext() menerima objek konteks, yaitu nilai yang dikembalikan dari React.createContext , dan kemudian mengembalikan nilai konteks saat ini untuk konteks itu.

Hook ini memberi komponen fungsional akses mudah ke konteks aplikasi React Anda. Sebelum kait useContext diperkenalkan, Anda perlu menyiapkan contextType atau <Consumer> untuk mengakses status global Anda yang diturunkan dari beberapa penyedia dalam komponen kelas.

Pada dasarnya, useContext hook bekerja dengan React Context API yang merupakan cara untuk berbagi data secara mendalam di seluruh aplikasi Anda tanpa perlu secara manual menurunkan props aplikasi Anda melalui berbagai level. Sekarang, useContext() membuat penggunaan Konteks sedikit lebih mudah.

Cuplikan kode di bawah ini akan menunjukkan cara kerja Context API dan bagaimana useContext Hook membuatnya lebih baik.

Cara Normal Menggunakan API Konteks

 import React from "react"; import ReactDOM from "react-dom"; const NumberContext = React.createContext(); function App() { return ( <NumberContext.Provider value={45}> <div> <Display /> </div> </NumberContext.Provider> ); } function Display() { return ( <NumberContext.Consumer> {value => <div>The answer to the question is {value}.</div>} </NumberContext.Consumer> ); } ReactDOM.render(<App />, document.querySelector("#root"));

Sekarang mari kita uraikan cuplikan kode dan jelaskan setiap konsep.

Di bawah ini, kami membuat konteks yang disebut NumberContext . Ini dimaksudkan untuk mengembalikan objek dengan dua nilai: { Provider, Consumer } .

 const NumberContext = React.createContext();

Kemudian kami menggunakan nilai Provider yang dikembalikan dari NumberContext yang kami buat untuk membuat nilai tertentu tersedia untuk semua anak.

 function App() { return ( <NumberContext.Provider value={45}> <div> <Display /> </div> </NumberContext.Provider> ); }

Dengan itu, kami dapat menggunakan nilai Consumer yang dikembalikan dari NumberContext yang kami buat untuk mendapatkan nilai yang kami sediakan untuk semua anak. Jika Anda perhatikan, komponen ini tidak mendapatkan alat peraga apa pun.

 function Display() { return ( <NumberContext.Consumer> {value => <div>The answer to the question is {value}.</div>} </NumberContext.Consumer> ); } ReactDOM.render(<App />, document.querySelector("#root"));

Perhatikan bagaimana kita bisa mendapatkan nilai dari komponen App ke dalam komponen Display dengan membungkus konten kita dalam NumberContext.Consumer dan menggunakan metode render props untuk mengambil nilai dan merendernya.

Semuanya bekerja dengan baik dan metode render props yang kami gunakan adalah pola yang sangat bagus untuk menangani data dinamis, tetapi dalam jangka panjang, metode ini menimbulkan beberapa sarang dan kebingungan yang tidak perlu jika Anda tidak terbiasa.

Menggunakan Metode useContext

Untuk menjelaskan metode useContext kita akan menulis ulang komponen Display menggunakan hook useContext.

 // import useContext (or we could write React.useContext) import React, { useContext } from 'react'; // old code goes here function Display() { const value = useContext(NumberContext); return <div>The answer is {value}.</div>; }

Itu saja yang perlu kita lakukan untuk menampilkan nilai kita. Cukup rapi, bukan? Anda memanggil kait useContext() dan meneruskan objek konteks yang kami buat dan kami mengambil nilainya darinya.

Catatan: Jangan lupa bahwa argumen yang diteruskan ke kait useContext harus objek konteks itu sendiri dan komponen apa pun yang memanggil useContext akan selalu dirender ulang saat nilai konteks berubah.

useReducer()

Kait useReducer digunakan untuk menangani status kompleks dan transisi dalam status. Dibutuhkan fungsi reducer dan juga input status awal; kemudian, ia mengembalikan status saat ini dan juga fungsi dispatch sebagai output melalui destrukturisasi array.

Kode di bawah ini adalah sintaks yang tepat untuk menggunakan hook useReducer .

 const [state, dispatch] = useReducer(reducer, initialArg, init);

Ini adalah semacam alternatif dari kait useState ; biasanya lebih disukai untuk useState ketika Anda memiliki logika keadaan kompleks yang berkaitan dengan beberapa sub-nilai atau ketika keadaan berikutnya bergantung pada yang sebelumnya.

Kait Bereaksi Lainnya Tersedia

useCallback Kait ini mengembalikan fungsi panggilan balik yang di memo dan hanya berubah jika satu dependensi di pohon dependensi berubah.
useMemo Kait ini mengembalikan nilai memo, Anda dapat meneruskan fungsi "buat" dan juga larik dependensi. Nilai yang dikembalikannya hanya akan menggunakan nilai memo itu lagi jika salah satu dependensi di pohon dependensi berubah.
useRef Kait ini mengembalikan objek ref yang bisa berubah yang properti .current diinisialisasi ke argumen yang diteruskan ( initialValue ). Objek yang dikembalikan akan tersedia selama masa pakai penuh komponen.
useImperativeHandle Kait ini digunakan untuk menyesuaikan nilai instans yang tersedia untuk komponen induk saat menggunakan referensi di React.
useLayoutEffect Hook ini mirip dengan hook useEffect , namun, ia diaktifkan secara serempak setelah semua mutasi DOM. Itu juga dirender dengan cara yang sama seperti componentDidUpdate dan componentDidMount .
useDebugValue Hook ini dapat digunakan untuk menampilkan label untuk custom hook di React Dev Tools. Ini sangat berguna untuk debugging dengan React Dev Tools.

Kait Bereaksi Kustom

"Hook kustom" adalah fungsi JavaScript yang namanya diawali dengan kata use dan dapat digunakan untuk memanggil Hook lain. Ini juga memungkinkan Anda untuk mengekstrak logika komponen ke dalam fungsi yang dapat digunakan kembali; mereka adalah fungsi JavaScript normal yang dapat menggunakan Hook lain di dalamnya, dan juga berisi logika stateful umum yang dapat digunakan dalam beberapa komponen.

Cuplikan kode di bawah ini menunjukkan contoh React Hook kustom untuk mengimplementasikan infinite scroll (oleh Paulo Levy):

 import { useState } from "react"; export const useInfiniteScroll = (start = 30, pace = 10) => { const [limit, setLimit] = useState(start); window.onscroll = () => { if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ) { setLimit(limit + pace); } }; return limit; };

Hook khusus ini menerima dua argumen yaitu start dan pace . Argumen awal adalah jumlah elemen awal yang akan dirender sedangkan argumen kecepatan adalah jumlah elemen berikutnya yang akan dirender. Secara default, argumen start dan pace masing-masing diatur ke 30 dan 10 yang berarti Anda benar-benar dapat memanggil Hook tanpa argumen apa pun dan nilai default tersebut akan digunakan sebagai gantinya.

Jadi untuk menggunakan Hook ini dalam aplikasi React, kami akan menggunakannya dengan API online yang mengembalikan data 'palsu':

 import React, { useState, useEffect } from "react"; import { useInfiniteScroll } from "./useInfiniteScroll"; const App = () => { let infiniteScroll = useInfiniteScroll(); const [tableContent, setTableContent] = useState([]); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/") .then(response => response.json()) .then(json => setTableContent(json)); }, []); return ( <div style={{ textAlign: "center" }}> <table> <thead> <tr> <th>User ID</th> <th>Title</th> </tr> </thead> <tbody> {tableContent.slice(0, infiniteScroll).map(content => { return ( <tr key={content.id}> <td style={{ paddingTop: "10px" }}>{content.userId}</td> <td style={{ paddingTop: "10px" }}>{content.title}</td> </tr> ); })} </tbody> </table> </div> ); }; export default App;

Kode di atas akan menampilkan daftar data palsu ( userID dan title ) yang menggunakan infinite scroll hook untuk menampilkan jumlah awal data di layar.

Kesimpulan

Saya harap Anda menikmati bekerja melalui tutorial ini. Anda selalu dapat membaca lebih lanjut tentang React Hooks dari referensi di bawah ini.

Jika Anda memiliki pertanyaan, Anda dapat meninggalkannya di bagian komentar dan saya akan dengan senang hati menjawabnya!

Repo pendukung untuk artikel ini tersedia di Github.

Sumber Daya Dan Bacaan Lebih Lanjut

  • “Referensi Kait API,” React.js Docs
  • “Apa Itu React Hooks?,” Robin Wieruch
  • “Bagaimana useContext Bekerja,” Dave Ceddia
  • “React Hooks: Cara Menggunakan useEffect() ,” Hossein Ahmadi, Medium
  • “Menulis Kait React Kustom Anda Sendiri,” Aayush Jaiswal, Medium
  • “React Hook Recipes yang Mudah Dipahami,” Gabe Ragland, useHooks()