Hooks di React 16.8 Membuat Component Lebih Clean

Hooks merupakan salah satu cara untuk menerapkan state di component React tanpa menggunakan kelas, cool bukan. Kita para developer tak perlu lagi membuat class hanya untuk komponen kecil, Hooks telah mengatasinya, pastinya setelah update ke React 16.8. 

Sebelum Ada Hooks

Sebelum ada Hooks , component yang tidak menggunakan class sering disebut sebagai stateless component, yup karena component tanpa class hanya bisa menerima props dan biarkan parrent component yang mengubah datanya. 

Tak jarang ada yang terpaksa membuat class, padahal cuma untuk komponent kecil, dan tidak memerlukan lifecycle react yang lain. Nah inilah yang membuat size bundlingnya membesar.

Setelah Ada Hooks

Hooks di react ini cara kerjanya adalah untuk initial dan generate state didalam komponen yang tidak menggunakan kelas. Hadir sejak update React 16.8. Implementasinya cukup berbeda dengan `setState` yang biasa digunakan di komponent React berbasis class, berikut contoh implementasinya.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState memegang peranan penting di Hooks. Karena dia berperan untuk initial state dan generate setter. diatas bisa kita lihat useState(0)  mengartikan bahwa nilai awal count adalah 0, dan setCount digunakan untuk merubah value dari count.

Menarik bukan, harapannya dengan update ini komponen di React app akan lebih clean dan small. Selamat bereksperimen.

https://reactjs.org/docs/hooks-intro.html