Belajar React hooks : Apa itu useEffect() ? Cara pakenya gimana ?

Halo semuanya, kembali lagi dengan saya Al Biruni, seorang front end developer dan juga content creator. Kali ini saya ingin share hal teknis tentang react hooks, yaitu useEffect. Mungkin buat kita yang baru belajar react akan menemui syntax useEffect ini, dan bisa saja kita masih bingung tentang cara penggunaannya atau cara kerjanya. di artikel ini saya akan coba jelasin dengan bahasa yang simpel dan semoga bisa dipahami dengan baik ya.

Oke langsung saja, kita bahas apa itu useEffect

menurut reactjs.org useEffect adalah The Effect Hook lets you perform side effects in function components:

Artinya useEffect adalah sebuah effect hook yang dapat melakukan side effect seperti pemanggilan data, setup subscription, mengganti dom secara manual dan lain-lain. jadi fungsi nya useEffect ini seperti componentDidMount dan componentDidUpdate sekaligus. jadi cukup dengan menggunakan useEffect kita dapat menggunakan fungsi dari componentDidMount dan componentDidUpdate. misalnya kalian ingin melakukan sebuah pemanggilan API ke server, kalian bisa melakukannya di dalam fungsi useEffect ini.

Sekarang kita akan coba buat effect pertama kita, pastikan project react kalian sudah siap.

untuk membuat useEffect kita bisa menuliskan syntax seperti ini.

Basic Syntax 

useEffect(() => {

// side effect

});

ini adalah syntax useEffect yang digunakan, didalam useEffect ada 2 parameter yaitu sebuah fungsi, dan parameter kedua adalah dependency array yang akan kita liat setelah ini.

PENTING! Jika kita menuliskan useEffect tanpa parameter kedua, maka useEffect ini akan terus terpanggil setiap kali komponen tersebut di render. kalo kita perhatikan maka jika tidak ada parameter kedua, maka fungsi nya menjadi seperti componentDidMount dan componentDidUpdate

useEffect dengan parameter array kosong:

useEffect(() => {

    // side effect dipanggil sekali

}, []); 

contoh diatas adalah kode useEffect dengan dependency array kosong, artinya jika kita menuliskan array kosong, maka useEffect hanya dapat dipanggil sekali ketika component pertama kali di mount. artinya fungsi nya akan menjadi seperti componentDidMount saja.

useEffect dengan parameter dependency:

const [id, setId] = useState(0);

useEffect(() => {

// panggil useEffect, ketika ada perubahan id

}, [id]);

Nah contoh kode diatas adalah useEffect dengan parameter dependency, artinya jika id nya berubah maka panggil fungsi useEffect sekali lagi. artinya useEffect disini berfungsi sebagai componentDidMount dan componentDidUpdate (tapi bersyarat) yang hanya update jika ada perubahan pada dependency.

useEffect sebagai componentWIllUnmount

Mungkin kalian berpikir gimana cara pake componentWillUnmount di functional component, tenang aja kita juga bisa ngelakui itu di useEffect lo, ini contoh kode nya.

useEffect(() => {

return () => {

// lakukan sesuatu jika component tidak di render

}

}, []);

Untuk membuat seperti componentWillUnmount kita tinggal me return sebuah fungsi, disitu kalian bisa melakukan hal yang diperlukan ketika komponen sudah tidak dirender di DOM.

BONUS! Penggunaan useEffect untuk pemanggilan API

import "./styles.css";

import { useEffect, useState } from "react";

import axios from "axios";

export default function App({ route }) {

const [users, setUsers] = useState([]);

useEffect(() => {

const cancelToken = axios.CancelToken;

const source = cancelToken.source();

axios

.get("https://jsonplaceholder.typicode.com/users", {

cancelToken: source.token

})

.then((res) => {

setUsers(res.data);

});

return () => {

source.cancel();

};

}, []);

return <div className="App">{JSON.stringify(users)}</div>;

}

Yap, akhirnya selesai juga nih artikel, semoga tutorial nya bermanfaat ya. Kalo kalian suka dengan artikel seperti ini jangan lupa pantengin trus blog.birunidev.com ya, biar kamu dapet tutorial teknis frontend yang lengkap dan mudah dimengerti. 

Sekian dari saya, sebarkan artikel ini ke temen-temen kalian biar kita bisa pinter bareng. Terimakasih dan sampai jumpa.