Hooks

Hooks merupakan fungsi fungsi yang dapat digunakan untuk terhubung dengan fitur2 React. kategori nya ada state hooks, context hooks, ref hooks, effectHooks, perfomance hooks, resource hooks, other hooks, hingga hooks kita sendiri.

docs: React Hooks Overview

useState

useState merupakan hook kategori state hooks, yang fungsi nya untuk menambahkan state variable pada component

  // format deklarasi variabel menggunakan useState 
  const [state, setState] = useState(initialState)

  // contoh
  const [isLoading, setIsLoading] = useState(false)
  const [age, setAge] = useState(24)
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());

  // jika initialState tidak diisi maka state akan bernilai `undefined`

untuk mengubah nilai dari state nya

  // contoh disini kita akan membuat state untuk menyimpan kondisi loading
  const [isLoading, setIsLoading] = useState(false)

  // cara mengubah state nya
  setIsLoading(true)

  // cara kedua dengan menggunakan current value dari state isLoading
  setIsLoading((prev) => !prev)

Catatan

  const [isLoading, setIsLoading] = useState(false)
  function handleClick() {
    setIsLoading(true)
    console.log(isLoading) // nilai nya akan masih false
  }

docs: Hooks useState Overview

useEffect

useEffect merupakan hooks yang fungsinya kurang lebih sama dengan react lifecycle pada class component yaitu componentDidMount, componentDidUpdate.

1. fungsi didalam useEffect akan terpanggil di awal komponen di render
2. fungsi aka di panggil kembali apabila terdapat depedensi yang berubah

  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    console.log(isLoading) // ketika komponen baru di render maka di console akan menampilkan `false`, jika nilai isLoading diubah ke `true` maka di console akan kembali menampilkan nilai isLoading yaitu `true`
  }, [isLoading])

Catatan

penggunaan useEffect yang tidak tepat bisa berdampak ke perfoma, sebisa mungkin hindari penggunaan useEffect yang terlalu banyak

karena useEffect itu jalan di setiap render, maka jika meletakan fungsi setState didalamnya tanpa ada kondisi apapun akan menyebabkan infinite loop contohnya:

 const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1);
  });

useContext

pernah kesulitan mengakses props? contohnya kamu ingin menggunakan props dari grand parent element ke grand child yang artinya nested nya cukup dalam (grand parent -> parent -> child -> grand child). atau kamu punya masalah misal kamu punya state informasi user yang login dan ingin digunakan di semua components?. props ini dapat digunakan untuk ngesolve masalah2 tersebut

sebelum menggunakan useContext perlu tau cara membuat context terlebih dahulu menggunakan API createContext

const ThemeContext = createContext(null)

  <ThemeContext.Provider value={'light'}>
    <GrandChildComponents />
  </ThemeContext.Provider>

  // grand child components
  const theme = useContext(ThemeContext)

  console.log(theme) // nilainya akan `light`

Catatan

1. value dari useContext juga bisa menyimpan state variabel dari useState maupun setVariabel nya

  const [theme, setTheme] = useState('light')

  <ThemeContext.Provider value={{theme, setTheme}}>
    <GrandChildComponents />
  </ThemeContext.Provider>

useMemo

useMemo ini masuk kedalam kategori perfomance hooks. fungsi nya untuk ngecache hasil diantara setiap rerender.

contoh kasusnya

1. saya mengambil data dri sebuah RestAPI dan ingin saya filter berdasarkan sebuah state cara 1 :

  const [filterBy, setFilterBy] = useState() 
  const [list, setList] = useState() 
  const [filteredList, setFilteredList] = useState() 

  useEffect(() => {
    if(filterBy && list){
      setFilteredList(filterList(list, filterBy))
    }
  }, [list,filterBy])

cara 2:

  const [filterBy, setFilterBy] = useState() 
  const [list, setList] = useState() 

  const filteredList = filterList(list, filterBy)

cara diatas tidak salah, sama2 bisa menghasilkan output yang sama, namun jika state list berisikan data yang sangat banyak sehinggu kalkulasinya menjadi expensive efeknya bisa menyebabkan nilai filteredList delay sekian detik sehingga ketika ingin digunakan untuk merender elemen pun akan delay juga, cara tersebut bisa di optimize dengan penggunaan useMemo, untuk mengetahui apakah kalkulasi tersebut expensive atau tidak bisa menggunakan console.time

In general, unless you’re creating or looping over thousands of objects, it’s probably not expensive If the overall logged time adds up to a significant amount (say, 1ms or more), it might make sense to memoize that calculatio

cara 3:

  const [filterBy, setFilterBy] = useState() 
  const [list, setList] = useState() 

  const filteredList = useMemo(() => filterList(list, filterBy), [list, filterBy])

docs: Hooks useMemo Overview