Common Hooks

React memiliki function hook yang bisa digunakan untuk membantu dalam proses development. Adapun hook bawaat pada react yaitu

useState

useState merupakan hook yang paling sering digunakan untuk membuat state variable. dengan useState dapat dengan mudah untuk memperbarui data yang ada di component

useState

import React from 'react'

export default function App(){
    const [count, setCount] = React.useState(0)

    const changeCount = ()=>{
        setState(count + 1)
    }

    return(
        <>
             <p>{state}</p>
             <button onClick={changeText}>Add</button>
        </button>
    )
}

useState mereturn sebuah array yang berfungsi sebagai setter dan getter dari hook tersebut. Di useState sendiri dapat dipassing sebuah callback untuk mengambil state sebelumnya

useState

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0);

  const changeCount = () => {
    // change state by previos state
    setState((prevState) => prevState + 1);
  };

  return (
    <>
      <p>{state}</p>
      <button onClick={changeCount}>Add</button>
    </>
  );
}

useEffect

hook ini digunakan untuk memberikan action lanjutan atau efek samping pada sebuah component ketika component sudah di render. useEffect menerima parameter callback(atau biasa dsebut sebagai effect function). Dan default dari useEffect adalah function ini akan dijalankan ketika sebuah komponent melakukan re render

useEffect

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    setCount((prevState) => prevState + 1);
  });

  return <p>{state}</p>;
}

Selain parameter callback useEffect masih menerima parameter kedua yang berupa array. Array ini disebut sebagai dependencies array yang fungsinya untuk memberikan effect/ trigger untuk menjalankan parameter callbak yang pertama. apabila array tersebut kosong maka useEffect hanya akan dijalankan satu kali saat component itu dirender

useEffect

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    setCount((prevState) => prevState + 1);
  }, []);

  return (
    <>
      <p>{state}</p>
    </>
  );
}

sedangkan apabila array tersebut memiliki value maka callback akan dijalankan ketika vvalue tersebut mengalami perubahan value

useEffect

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0);

  // hook will fire if state count is changed
  React.useEffect(() => {
    setCount((prevState) => prevState + 1);

    // dependencies array has a value
  }, [count]);

  const changeCount = () => {
    setCount((prevState) => prevState + 1);
  };

  return (
    <>
      <p>{state}</p>
      <button onClick={changeCount}>Add</button>
    </>
  );
}

pada callback useEffect dapat ditambahkan return function yag fungsinya sebagain cleanup atau dalam class component seperti componentDidUnMount. Return ini akan dipanggil ketika component tersebut dihapus pada DOM

useEffect

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0);

  // hook will fire if state count is changed
  React.useEffect(() => {
    setCount((prevState) => prevState + 1);

    return () => {
      console.log(" component unmount");
      setCount(0);
    };

    // dependencies array has a value
  }, [count]);

  const changeCount = () => {
    setCount((prevState) => prevState + 1);
  };

  return (
    <>
      <p>{state}</p>
      <button onClick={changeCount}>Add</button>
    </>
  );
}

useCallback

Hook ini sebagai optimation performance untuk function. pada component sebuah funtion akan dibuat ketika component setiap kali dirender dan mencegah component lain melakukan render ketika menggunakan memo. Maka untuk mengatasi hal tersebut adalah dengan menggunakan useCallbak. useCallback ini menerima dua parameter yang berupa callback function dan dependency array.

useCallback

import React from "react";

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Add</button>;
}

export default function App() {
  const [count, setCount] = React.useState(0);

  // function ini hanya akan dirender ketika ada perubahan pada state count
  const changeCount = useCallback(() => {
    setCount((prevState) => prevState + 1);
  }, [count]);

  return (
    <>
      <p>{state}</p>
      <ChildComponent onClick={changeCount} />
    </>
  );
}

useMemo

useMemo memiliki fungsi seperti useCallback yaitu sebagai memoization. selain itu kedua hooks ini menerima 2 parameter yang sama yaitu callback dan dependency array. meskipun demikian useMemo dan useCallback memiliki perbedaan

useMemo mengembalikan memoized value untuk operasi yang kompleks dan useCallback mengembalikan memoized callback

useMemo

import React from "react";

export default function App({ count }) {
  const data = React.useMemo(() => {
    return count + 1;
  }, [count]);

  return <p>{data}</p>;
}

:::top Comming soon

useRef

useContext

useReducer

useId

:::