State, Props & React Hooks

State
● State adalah sebuah object untuk menyimpan data pada React dan akan di
render atau muat ulang ketika data mengalami perubahan.

● State hanya bisa diakses di dalam component dimana state itu dibuat,
sehingga tidak bisa diakses dari component lain.
 State vs Variable
● Perbedaan antara state dan variable: variable tidak akan merender ulang
tampilannya, tapi secara functionalitas masih sama yaitu menyimpan nilai.
 Penulisan State
1. Pertama harus import library useState
import React, { useState } from 'react';

2. Deklarasi state
const [state, setState] = useState('Ayyub');

● state untuk menyimpan data

● setState untuk mengubah data
● useState untuk memanggil library state nya. Supaya kita bisa menggunakan
state.
● Ayyub adalah default value dari state tersebut.
 Penulisan State
3. Memanggil state di HTML

return (

<>

<h1>Hello</h1>

<p>My Name is {state}</p>

</>

);

4. Mengubah state

const handleChange = () => {

setState('Joko');

};
 Props
● Props adalah singkatan dari properties.
● React component adalah seperti function JavaScript, jika function JavaScript
bisa menerima sebuah argument maka React component bisa menerima
props.
● Dimana value dari props ini akan ditampilkan pada React element.

<Component propsName="value" />

 Props

Data di dalam props ini dapat diakses di dalam component atau child component
dengan mengakses object bernama props.

Perlu diperhatikan bahwa props bersifat read-only, yang berarti data dari props tidak
bisa diubah.
Menggabungkan Props & State
 React Hooks
● React memperkenalkan React Hooks di versi 16.8
● Hooks pada dasarnya adalah function yang disediakan React untuk
mempermudah kita dalam menggunakan state dan fitur React lain seperti
lifecycle method, context dll.
● Hooks hanya bisa digunakan di dalam function component
● Jenis - jenis hooks ada banyak, tapi kali ini kita akan belajar bersama
beberapa react hooks yang umum digunakan : useState, useEffect, useRef,
useMemo, useCallback
 Aturan main Hooks
Sebelum membahas lebih lanjut tentang jenis - jenis hooks, kita akan harus
mengetahui aturan main dari React Hooks ini.
● Tidak boleh didalam conditional (IF ELSE)
 Aturan main Hooks
● Tidak boleh didalam looping
 Aturan main Hooks

● Tidak boleh didalam nested function ( function didalam function )

 Jenis - Jenis Hooks
● useState

React hooks useState digunakan untuk membuat state di function komponen.

 Jenis - Jenis Hooks
● useEffect

React hooks useEffect digunakan untuk menambahkan side effect ke function

komponen.

Syntax:

useEffect(function, [state untuk trigger function])

 Jenis - Jenis Hooks
● useRef

React hooks useRef umumnya digunakan untuk mengakses DOM node

dalam sebuah komponen. Misal kita mau mengakses element input, maka
kita bisa menambahkan ref ke element inputnya.
 Jenis - Jenis Hooks
Kenapa di react untuk interaksi dengan DOM tidak pakai ID ?

Ini contoh kasus nya:

Pakai id dan tanpa ref Dengan Ref

 Jenis - Jenis Hooks
● useMemo

React hooks useMemo digunakan untuk mengoptimalkan performance

sebuah function. Caranya adalah dengan menyimpan hasil dari program
tersebut, istilah kerennya caching.

Jadi, ketika program tersebut dipanggil kembali dengan input yang sama,
maka tidak perlu lagi melakukan kalkulasi ulang. Jadi prosesnya akan jadi
lebih cepat.
Jenis - Jenis Hooks
 Jenis - Jenis Hooks
● useCallback

useCallback hooks digunakan untuk mencegah render child komponen yang

tidak di perlukan.
 Jenis - Jenis Hooks
Tanpa useCallback
 Jenis - Jenis Hooks
Dengan useCallback