Apa Itu Hooks ?

Hooks adalah feature baru di React sejak release versi 16.8 dengan Hooks tidak perlu definisi class untuk membuat state?

Sesuai dengan apa yang dijelaskan oleh Dan Abramov di React Conf 2018, React Conf 2018 dengan Hooks membuat banyak perubahan code di React yang membuat komponen lebih mudah untuk dibaca dan mempunyai lifecycle yang lebih mudah untuk dipahami, berikut contoh kecil untuk deklarasi state dengan dan sebelum menggunakan Hooks.

Implementasi State Dengan Hooks

Perbedaan deklarasi state dengan dan tanpa React Hooks:

    class Example extends Component {

    state = {
      hello: "class"
    }

    handleChange = ({target:{name, value}}) => {
      this.setState({[name]:value})
    }

    render() {
      const {hello} = this.state

      return (

      )
    }
  }

 function Example() {
    const [hello, setHello] = useState('hooks')

    const handleChange = ({ target: { value }}) => {
      setHello(value)
    }

    return(

    )
  }

Dari dua implementasi di atas dari segi line of code implementasi dengan React Hooks mempunyai lebih sedikit kode untuk ditulis dan untuk segi pembacaan kodenya lebih mudah.

Dalam Hooks pendeklarasian state tidak perlu lagi menggunakan this.state melainkan langsung memanggil nama variabel yang dibuat dan tidak perlu melakukan destructuring state untuk memudahkan pemanggilan state karena dalam deklarasi awalnya sudah dilakukan destructuring sebelumnya.

  // deklarasi state dalam class component
  state = {
    hello: 'class'
  }

  //destructuring state untuk kemudahan pengaksesan state
  const {hello} = this.state

  //pemanggilan state dalam render

  //deklarasi state dengan hooks
  const [hello, setHello] = useState('hooks')

  //pemanggilan state dalam hooks

Sedangkan dalam implementasi function masih sama namun hanya tidak adanya penulisan ulang this di dalam Hooks.

  //deklarasi function dalam class component
  handleChange = ({target:{name, value}}) => {
      this.setState({[name]:value})
  }

  // pemanggilan function dalam class component
  

  //deklarasi function dalam functional component
  const handleChange = ({target: {value}}) => {
    setHello(value)
  } 

  //pemanggilan function dalam functional component
  

Selanjutnya akan dibahas tentang function Hooks yang lainnya, seperti useReducer, useEffect, useContext, mengubah kode dari class component menggunakan hooks, dan cara membuat custom Hooks dan untuk additional ada tambahan useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue.

Here the codesandbox of this code

Reference

• Getting Started with Hooks
• Using state Hooks