Cara Menggunakan UseEffect di React Js

image from pexels.com

Salah satu fitur yang menarik dari React js adalah UseEffect. useEffect memungkinkan kamu melakukan effect samping di react app kamu dan useEffect biasanya di gunakan untuk fetch data dari Apis. Tapi tak hanya untuk fetch data dari Api saja, ada beberapa kegunaan yang useEffect ini bisa lakukan. Penasaran?? baca sampai selesai.

Tak dipungkiri lagi teknologi buatan facebook ini menjadi favorite beberapa developer dan memiliki komunitas yang sangat besar. Menurut survei dari StackOverflow di tahun 2020, React Js menjadi urutan kedua web Framework yang paling banyak digunakan. untuk melihat hasil survei nya bisa klik di link ini .

UseEffect ini di jalankan setelah render. Cara menggunakan useEffect diharuskan di luar class dan harus di dalam function. jika kalian menggunakan useEffect di dalam class, maka akan mendapatkan error. berikut cara menggunakan useEffect :

import React, {useEffect} from 'react'
function Example(){
  
  useEffect(() =>{
      //perintah yang akan di jalankan
  })
}

Seperti contoh kode di atas, sebelum menggunakan useEffect maka harus mendefiniskan nya terlebih dahulu import React, {useEffect} from ‘react’ , dan harus menggunakannya di dalam function.

UseEffect sama dengan componentDidMount di React class lifecycle methods, dan perbedaannya adalah jika kamu menggunakan useEffect akan lebih simpel dan code kamu akan lebih mudah dibaca.

Jika state kamu di dalam useEffect sering berubah dan di haruskan memberi effect saat state tersebut berubah, maka di haruskan untuk mendefinisikan state di dalam brackets [yourState]. sebagai contoh bisa lihat code dibawah :

useEffect(() =>{
   yourState
},[ yourState ])

Penggunaan brackets di dalam useEffect tidak hanya untuk update state saja, tapi juga untuk menjalankan kode yang di dalam useEffect hanya sekali. jika brackets tidak tuliskan atau dihilangkan, maka kode yang berada di dalam useEffect akan selalu berjalan atau tidak hanya berjalan satu kali tapi bisa lebih dari satu kali. itu akan membuat kode yang didalamnya akan berjalan berkali-kali. Maka menurut aku pribadi wajib untuk menuliskan brackets di useEffect jika program yang berada di dalam useEffect yang berjalan sekali setelah render saja.

Buat yang masih bingung, aku akan memberikan dua contoh penggunaan useEffect. Untuk contoh pertama, aku akan memberikan contoh penggunaan useEffect pada Glide Js. Glide Js adalah library javascript untuk slider dan carousel. berikut contoh nya :

import React, {useEffect} from 'react'
import Glide from '@glidejs/glide'
function Slider(){
   const slider = new Glide('.yourClass',sliderConfiguration);
useEffect(()=>{
     
     slider.mount();
     return () => slider.destroy();
  },[])
 return(
    <div>
      <div>Glide JS</div>
      <div className="yourClass"></div>
    </div>
 )
}

Di kode yang berada di atas, aku mendefinisikan slider Glide (slider.mount()) di dalam useEffect. variable slider akan di eksekusi setelah render. Jika variable slider aku taruh di luar useEffect, maka slider Glide tidak akan berjalan. Dan untuk return() => yang berada di dalam useEffect, itu sama dengan componentDidUnmount yang berada di React class lifecycle methods. itu di maksudkan untuk memberi aksi setelah page di reload. kalau untuk contoh di atas, return akan menghapus aksi Glide setelah di reload.

Untuk contoh kedua, aku akan memberi contoh penggunaan useEffect pada fetch data dari Api dan di saat fecth data dari Api tersebut juga terdapat perubahan state.

import React, {useEffect, useState} from 'react'
funtion Example(){
  const [page, setPage] = useState(1)
  const [data, setData] = useState([])
  const pageHandler = () =>{
    return setPage(prevState => prevState + 1)
  }
  useEffect(()=>{
    
    const fetchData = async() =>{
      const res = await fetch(`https//:example.com/page/${page}`
      const data = res.json()
      return setData(data)
    }
    fetchData()
  },[page])
  return(
    <div>
      
      <button onClick={pageHandler}>Change Page</button>
    </div>
  )
}

State page pada kode di atas akan berubah jika button Change Page di tekan. dan tekanan pada button tersebut akan mempengruhi state page atau akan menambah nilai 1 di dalam state page . berubahan pada state page tersebut ada mempengaruhi hasil respon data dari variabel res di dalam useEffect. dan state page yang berada di dalam brackets useEffect akan merespon dan menghasilkan pembaruan state data.

Mungkin sudah cukup penjelasan Cara penggunaan useEffect di React js, mungkin jika ada waktu saya akan meneruskan artikel ini dan memberi contoh-contoh lebih banyak tentang cara penggunaan useEffect.

Jangan lupa beri clap dan share jika ini bermanfaat….