Apa itu useState dan useEffect

useState dan useEffect merupakan salah satu hooks yang sempat sedikit dibahas di Apa itu React. Hooks sendiri merupakan Hooks sendiri merupakan fungsi yang memungkinkan kita untuk terhubung dengan fitur yang ada di React khusus di Functional Components.

useState Hooks ini digunakan menambahkan variabel state pada komponen dengan format

const [state, setState] = useState(initialState)

state: variabel yang menyimpan sebuah nilai
setState: method untuk merubah nilai state
initialState: bisa diisikan nilai atau pun function yang mereturn sebuah nilai, jika method maka hanya akan dipanggil sekali ketika component dipanggil

contoh :

  const [age, setAge] = useState(224);
  const [name, setName] = useState('Shaddam');
  const [todos, setTodos] = useState([{id: 1, description: 'Refactoring'}]);
   const [windowSize, setWindowSize] = useState(() => {
    if (typeof window === 'undefined') {
      return [0, 0]
    }
    return [window.innerHeight, window.innerWidth]
  })

useEffect menurut dokumentasi resmi nya useEffect ini digunakan untuk Syncronize with External System, contoh external system disini misal kita perlu mengirim log analytic ketika komponen muncul dilayar, berkomunikasi dengan API berdasarkan perubahan state.

useEffect(() => {

  logic()

  return () => {
    cleanup()
  }
}, [deps])

logic: simplenya fungsi yang dijalankan ketika deps mengalami perubahan value
cleanup: ketika sebuah variabel didalam logic perlu di set selalu sama, maka bisa dimasukkan kedalam cleanup ini karena cleanup akan di call sebelum logic
deps: deps atau depedencies merupakan list semua nilai yang reactive yang umumnya digunakan didalam logic()

contoh:

useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);