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 lifecylce method, context dll.

❗ Hooks hanya bisa digunakan di dalam function component

Kita bahas secara singkat beberapa React Hooks yang sering digunakan:

1. useState()

Digunakan untuk membuat dan mengupdate state.

Pada class component membuat dan mengupdate state harus dilakukan seperti ini:

Copy
1import React from 'react';
2
3class App extends React.Component {
4  state = {
5    name: 'brachio'
6  };
7
8  handleChange = () => {
9    this.setState({ name: 't-rex' });
10  };
11
12  render() {
13    return (
14      <div>
15        <h1>Hello Devsaurus</h1>
16        <p>My Name is {this.state.name}</p>
17        <button onClick={this.handleChange}>Change Name</button>
18      </div>
19    );
20  }
21}
22
23export default App;

Jika kita perhatikan code di atas terdapat tambahan keyword this untuk mengakses state dan menggunakan setState().

Keyword this kadang membuat bingung sebagian developer karena this pada JavaScript tidak selalu mengacu pada object dimana this digunakan.

Pembahasan this akan dibahas pada materi JavaScript lanjutan.

Dengan menggunakan useState kita tidak perlu menambahkan keyword this.

Copy
1import React, { useState } from 'react';
2
3export default function App() {
4  const [state, setState] = useState('brachio');
5
6  const handleChange = () => {
7    setState('t-rex');
8  };
9
10  return (
11    <div>
12      <h1>Hello Devsaurus</h1>
13      <p>My Name is {state}</p>
14      <button onClick={handleChange}>Change Name</button>
15    </div>
16  );
17}

2. useEffect()

Memungkinkan untuk menambahkan side effect di function component dan juga bisa menjadi alternatif untuk lifecycle method componentDidMount() dan componentDidUpdate().

side effect pada react adalah function yang dieksekusi setelah render.

Salah satu kondisi dimana kita bisa menggunakan useEffect() adalah pada saat fetch data dari server.

Copy
1useEffect(() => {
2    fetchData(https://server.somewhere);
3  });

3. useContext()

Digunakan untuk memudahkan penggunaan context.

Membuat dan menyediakan context

Copy
1const MyContext = React.createContext(null);
2
3const componentA = () => {
4  return <MyContext.Provider value={'value'}></MyContext.Provider>;
5};

Menggunakan (consume) context

Tanpa useContext():

Copy
1const componentD = () => {
2  return <MyContext.Consumer>{(value) => <p>{value}</p>}</MyContext.Consumer>;
3};

Dengan useContext():

Copy
1const componentD = () => {
2  const value = useContext(MyContext);
3  return <>{value}</>;
4};

Hooks lain yang disediakan oleh React:

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue