useState
dan useEffect
adalah dua hook yang sangat penting dalam React yang digunakan untuk mengelola state dan efek samping dalam komponen fungsional. Berikut adalah penjelasan singkat tentang keduanya dalam bahasa Indonesia:
-
useState
:useState
adalah salah satu hook yang digunakan untuk mengelola state dalam komponen fungsional React. DenganuseState
, Anda dapat membuat variabel state dan mengubahnya tanpa harus membuat kelas komponen. Ini digunakan dengan cara berikut:import React, { useState } from 'react'; function ContohKomponen() { const [nilaiState, setNilaiState] = useState(nilaiAwal); // 'nilaiState' adalah nilai state saat ini // 'setNilaiState' adalah fungsi yang digunakan untuk mengubah nilai state }
useState
mengembalikan array dengan dua elemen: nilai state saat ini dan fungsi untuk mengubah nilai state. Anda dapat menginisialisasi state dengannilaiAwal
. KetikasetNilaiState
dipanggil dengan nilai baru, komponen akan di-rendor ulang dengan state yang diperbarui. -
useEffect
:useEffect
adalah hook yang digunakan untuk mengelola efek samping dalam komponen fungsional, seperti pengambilan data, langganan, atau pembaruan DOM. Anda dapat menggunakannya untuk menjalankan kode setelah komponen di-render atau ketika ada perubahan pada state tertentu. Contoh penggunaanuseEffect
:import React, { useEffect, useState } from 'react'; function ContohEfekSamping() { const [data, setData] = useState([]); useEffect(() => { // Kode yang dijalankan setelah komponen di-render // Biasanya digunakan untuk pengambilan data dari API fetchData().then((result) => { setData(result); }); }, []); // Parameter kedua adalah array dependensi, kosong berarti hanya dijalankan saat komponen pertama kali dirender return ( <div> {data.map((item) => ( <p key={item.id}>{item.nama}</p> ))} </div> ); }
useEffect
menerima dua parameter: fungsi efek samping dan array dependensi. Efek samping akan dijalankan ketika komponen di-render, dan akan dijalankan lagi jika ada perubahan pada nilai-nilai yang terdaftar dalam array dependensi.
Semoga penjelasan ini membantu Anda memahami useState
dan useEffect
dalam React.