Skip to content

Instantly share code, notes, and snippets.

@rizkytegar
Created October 24, 2023 17:33
Show Gist options
  • Save rizkytegar/7cafc923a4c221c0d558b678a98e2c67 to your computer and use it in GitHub Desktop.
Save rizkytegar/7cafc923a4c221c0d558b678a98e2c67 to your computer and use it in GitHub Desktop.

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:

  1. useState: useState adalah salah satu hook yang digunakan untuk mengelola state dalam komponen fungsional React. Dengan useState, 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 dengan nilaiAwal. Ketika setNilaiState dipanggil dengan nilai baru, komponen akan di-rendor ulang dengan state yang diperbarui.

  2. 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 penggunaan useEffect:

    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment