Post Categories

Engineering
A Better Way Of React With Hooks | Part 1
BY
Isna
|
July 27, 2020
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