Bekerja dengan React Hooks

Dengan React Hooks, pengembang dapat menulis komponen fungsional dengan cara yang berbeda dan lebih mudah, menangani logika state dan efek samping dengan cara yang lebih mudah dimengerti dan efisien di React. Hooks, yang diperkenalkan pada React 16.8, memungkinkan state dan fitur React lainnya untuk digunakan pada komponen fungsional, menghasilkan kode yang lebih bersih, lebih mudah dibaca, dan dapat digunakan kembali.

Apa yang dimaksud dengan React Hooks?

React Hooks adalah fungsi yang memungkinkan Anda untuk mengaitkan ke fitur React seperti fitur state dan lifecycle dari komponen fungsi. Sebelum adanya Hooks, Stateful Logic hanya dapat dilakukan dengan menggunakan Class Components. Hooks memungkinkan pengembang untuk mengatasi keterbatasan ini dan mereka juga mengarahkan pengembang untuk menulis kode yang lebih sederhana, lebih fungsional.

sumber: medium.com

Hooks yang umum digunakan antara lain:

useState: Pengait untuk mengelola state di dalam komponen fungsional.
useEffect: Untuk efek samping, seperti mengambil data atau memanipulasi DOM.
useContext: Untuk mengonsumsi nilai konteks tanpa membuat nesting props render.
useReducer: Untuk mengelola logika state yang lebih kompleks seperti redux.
useRef: Untuk mengakses ref yang dapat diubah atau elemen DOM.

Menggunakan useState

useState Hook adalah cara sederhana untuk mengelola state dalam komponen fungsional. Hook ini mengembalikan sebuah array yang berisi dua elemen: state saat ini dan fungsi untuk memperbaruinya.

Berikut adalah contohnya:

import React, { useState } from 'react';

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

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

Pada contoh ini, useState(0) menginisialisasi count ke 0. Fungsi setCount memperbarui state setiap kali tombol diklik.

Menggunakan useEffect

useEffect Hook: digunakan untuk melacak halaman yang memiliki efek samping seperti mengambil data, berlangganan ke sebuah event, dll. Secara default, hook ini berjalan setelah render, dan Anda dapat mengonfigurasinya untuk dipanggil ketika hanya nilai tertentu yang berubah.

Contoh:

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

function Timer() {
const [seconds, setSeconds] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);

return () => clearInterval(interval); // Cleanup on component unmount
}, []);

return <p>Elapsed time: {seconds} seconds</p>;
}

Dalam contoh ini, useEffect berjalan setelah render awal satu kali (sebagai hasil dari larik ketergantungan kosong []), dan menetapkan interval untuk memperbarui status detik setiap detik. Untuk mencegah kebocoran memori, fungsi pembersihan akan menghapus interval tersebut.

Menggabungkan Pengait

Hooks juga dapat digabungkan satu sama lain untuk membuat komponen yang kuat dan dapat digunakan kembali. Sebagai contoh:

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

function SearchBar() {
const [query, setQuery] = useState('');
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus(); // Automatically focus the input field
}, []);

const handleSearch = () => {
console.log(`Searching for: ${query}`);
};

return (
<div>
<input
ref={inputRef}
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<button onClick={handleSearch}>Search</button>
</div>
);
}

Hooks dapat memungkinkan Anda mengambil referensi ke elemen DOM masukan (useRef), mengelola status kueri penelusuran (useState), dan memfokuskan kapan pun komponen terpasang (useEffect).

Praktik Terbaik Pengait

Patuhi Aturan Hooks: Panggil Hooks pada level teratas dari komponen Anda atau Hook khusus saja dan hanya di dalam fungsi React.
Gunakan Array Ketergantungan dengan Benar: Berikan dependensi yang benar di useEffect dan Hooks yang relevan untuk mencegah render yang tidak perlu / penutupan basi.
Membangun Hooks Khusus: Mengatur dan menggunakan kembali kode dengan membuat Hooks khusus Anda sendiri yang merangkum logika yang dapat digunakan kembali.
Praktik terbaik Hooks - Jaga agar Hooks Anda tetap sederhana: Jika sebuah komponen melakukan terlalu banyak hal, pertimbangkan untuk memecah komponen Anda dengan Hooks menjadi komponen yang lebih kecil.

Kesimpulan

Hooks telah sepenuhnya mendefinisikan ulang cara membangun aplikasi di react. Hooks menghasilkan kode yang lebih bersih, mewakili pergeseran ke arah konsep pemrograman fungsional, dan menyederhanakan manajemen state dan siklus hidup yang kompleks secara signifikan. Mempelajari Hooks memungkinkan Anda untuk meningkatkan pengalaman pengembangan React dan membangun aplikasi yang lebih mudah dipelihara, dioptimalkan, dan modern.

kembali ke>>>> React.js untuk Pemula: Membangun Aplikasi Pertama Anda