Reusable React Hook

Sekilas tentang React Hook

Hooks merupakan fitur baru di React 16.8. Dengan Hooks, kita dapat menggunakan state dan fitur React yang lain tanpa perlu menulis sebuah kelas baru.

import React, { useState } from 'react';

function Example() {
  // Mendeklarasikan variabel state baru, yaitu "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Kamu mengklik {count} kali</p>
      <button onClick={() => setCount(count + 1)}>
        Klik aku
      </button>
    </div>
  );
}

Untuk mempelajari dasar-dasar react-hook, kamu dapat pelajari di halaman ini

Ketika mendevelop sebuah aplikasi React, seringkali kita menemui penggunaan state yang sama pada beberapa komponen yang berbeda. Contoh:

FormBiodata.js

import React, { useState } from 'react';

const FormBiodata = () => {
  const [state, setState] = {
    name: '',
    age: 0,
    province: '',
    city: '',
    district: '',
    subdistrict: ''
  }

  // ... another method

  return (
    <div>
     // ... your component
    </div>
  )
}

FormEvent.js

import React, { useState } from 'react';

const FormEvent = () => {
  const [state, setState] = {
    event_name: '',
    address: '',
    province: '',
    city: '',
    district: '',
    subdistrict: ''
  }

  // ... another method

  return (
    <div>
     // ... your component
    </div>
  )
}

Pada contoh component diatas, component FormBiodata dan FormEvent menggunakan sebagian state yang sama yaitu province, city, district dan subdistrict. Untuk menghindari pembuatan state yang sama secara berulang-ulang, maka perlu kita buat state-nya menjadi reusable. Bagaimana caranya? Simak artikel ini sampai selesai!!!

Tahap pertama kita buat file UseLocation.js, component ini yang nanti nya akan di panggil oleh FormBiodata dan FormEvent

import React, { useState } from 'react';

const useLocation = () => {
  // definisikan default state nya
  const defaultLocation = {
    province: '',
    city: '',
    district: '',
    subdistrict: ''
  };

  // assign defaultLocation ke state location
  const [location, setLocation] = defaultLocation;

  // untuk clear state location
  const resetLocation = () => {
    setLocation(defaultLocation)
  }

  return {
    defaultLocation,
    location,
    setLocation,
    resetLocation
  }
}

export default useLocation;

Khusus untuk penggunaan state yang berhubungan dengan location, cukup gunakan useLocation. Berikut beberapa modifikasi pada file FormBiodata dan FormEvent.

FormBiodata.js

import React, { useState } from 'react';
import useLocation from './useLocation';

const FormBiodata = () => {
  const [biodata, setBiodata] = {
    name: '',
    age: 0,
  }

  const {
    location, // state location
    setLocation // method untuk manipulasi state location
  } = useLocation();

  // handle submit
  const onSumbit = (e) => {
    e.preventDefault();

    // gabungkan state biodata & location
    const newState = {...biodata, ...location};
    console.log(newState);

    // lakukan step lainnya ...
  }

  // ... another method

  return (
    <div>
      <form onSumbit={onSubmit}>
        <input type="text" name="name" value={biodata.name} onChange={e => setBiodata({...biodata, name: e.target.value})>

        <input type="number" name="age" value={biodata.age} onChange={e => setBiodata({...biodata, age: e.target.value})>

        // -- location section
        <input type="text" name="province" value={location.province} onChange={e => setLocation({...location, province: e.target.value})>

        <input type="text" name="city" value={location.city} onChange={e => setLocation({...location, city: e.target.value})>

        <input type="text" name="district" value={location.district} onChange={e => setLocation({...location, district: e.target.value})>

        <input type="text" name="subdistrict" value={location.subdistrict} onChange={e => setLocation({...location, subdistrict: e.target.value})>

        // -- end location section

        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

FormEvent.js

import React, { useState } from 'react';
import useLocation from './useLocation';

const FormEvent = () => {
  const [event, setEvent] = {
    event_name: '',
    address: '',
  }

  const {
    location, // state location
    setLocation // method untuk manipulasi state location
  } = useLocation();


  // handle submit
  const onSumbit = (e) => {
    e.preventDefault();

    // gabungkan state event & location
    const newState = {...event, ...location};
    console.log(newState);

    // lakukan step lainnya ...
  }

  // ... another method

  return (
    <div>
      <form onSumbit={onSubmit}>
        <input type="text" name="event_name" value={event.event_name} onChange={e => setEvent({...event, name: e.target.value})>

        <input type="text" name="address" value={event.address} onChange={e => setEvent({...event, address: e.target.value})>

        // -- location section
        <input type="text" name="province" value={location.province} onChange={e => setLocation({...location, province: e.target.value})>

        <input type="text" name="city" value={location.city} onChange={e => setLocation({...location, city: e.target.value})>

        <input type="text" name="district" value={location.district} onChange={e => setLocation({...location, district: e.target.value})>

        <input type="text" name="subdistrict" value={location.subdistrict} onChange={e => setLocation({...location, subdistrict: e.target.value})>

        // -- end location section

        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

Nah, dengan dibuatnya useLocation dapat dipanggil oleh component yang berbeda-beda & mempermudah pengelompokan state. Contoh diatas masih versi sederhana, dalam penggunaannya masih bisa kamu kembangkan lagi.

Selamat mencoba!