Class Component vs Function Component

Pada tulisan ini kita akan membahas dua jenis component yang ada di React, React Class Component & React Function Component.

Kita bahas perbedaan dari kedua jenis component tersebut dari sisi cara membuat component, data handling dan lifecycle Methods.

React Class Component

Di awal versi react, semua React component ditulis menggunakan syntax ES6 Class.

Membuat Component

1import React, { Component } from 'react';
2
3class App extends Component {
4  render() {
5    return (
6      <div>
7        <h1>Hello Devsaurus</h1>
8      </div>
9    );
10  }
11}
12
13export default App;

Data Handling

React menggunakan props & state untuk menghandle data di dalam component.

props bersifat read only dan biasa digunakan untuk mentransfer data dari parent component ke child component.

1import React, { Component } from 'react';
2
3class App extends Component {
4  render() {
5    return (
6      <div>
7        <Greeting name="Brachio" />
8      </div>
9    );
10  }
11}
12
13class Greeting extends Component {
14  render() {
15    return <h1>Hello {this.props.name}</h1>;
16  }
17}
18
19export default App;

state digunakan untuk menghandle data yang sifatnya berubah-ubah, state hanya bisa diakses di dalam component dimana state itu dibuat, sehingga tidak bisa diakses dari component lain kecuali diubah menjadi props.

Membuat state

1import React, { Component } from 'react';
2
3class App extends Component {
4  state = {
5    isVisible: false
6  };
7
8  render() {
9    return (
10      <div>
11        <Greeting name="Brachio" />
12      </div>
13    );
14  }
15}
16
17class Greeting extends Component {
18  render() {
19    return <h1>Hello {this.props.name}</h1>;
20  }
21}
22
23export default App;

Update state

state tidak bisa diupdate langsung.

Pada code diatas jika kita ingin mengubah nilai state isVisible dari false ke true kita tidak bisa melakukannya seperti ini:

1this.state.isVisible = true;

namun harus menggunakan method khusus bernama setState().

1import React, { Component } from 'react';
2
3class App extends Component {
4  state = {
5    isVisible: false
6  };
7
8  handleClick = () => {
9      this.setState({ isVisible: !this.state.isVisible })
10  }
11
12  render() {
13    return (
14      <div>
15        <button onClick={this.handleClick}>
16          Say Hello
17        </button>
18        {this.state.isVisible ? <Greeting name="Brachio" /> : <div />}
19      </div>
20    );
21  }
22}
23
24class Greeting extends Component {
25  render() {
26    return <h1>Hello {this.props.name}</h1>;
27  }
28}
29
30export default App;

Mengubah state tanpa menggunakan setState() membuat component tidak akan di re-render.

3. Lifecycle Method

Dalam proses menampilkan component pada browser, React mengeksekusi beberapa method di balik layar.

Proses eksekusi ini dibagi menjadi beberapa fase yaitu Mounting, Updating dan Unmounting

Pada setiap fase, React akan mengeksekusi beberapa built-in method secara berurutan yang disebut lifecycle method

Berikut diagram React Lifecycle Methods:

react lifecycle

Sumber

Sebagai contoh Lifecycle Method componentDidMount() akan dieksekusi setelah component selesai di render.

1import React, { Component } from 'react';
2
3class App extends Component {
4  state = {
5    isVisible: false,
6    text: ""
7  };
8
9  componentDidMount() {
10    this.setState({ ...this.state, text: "This text show after component is rendered" })
11  }
12
13  handleClick = () => {
14      this.setState({ isVisible: !this.state.isVisible })
15  }
16
17  render() {
18    return (
19      <div>
20        <button onClick={this.handleClick}>
21          Say Hello
22        </button>
23        {this.state.isVisible ? <Greeting name="Brachio" /> : <div />}
24        <br />
25        <h2>{this.state.text}</h2>
26      </div>
27    );
28  }
29}
30
31class Greeting extends Component {
32  render() {
33    return <h1>Hello {this.props.name}</h1>;
34  }
35}
36
37export default App;

React Function Component

React Function Component adalah jenis React component yang memiliki syntax yang lebih simple dan memungkinkan kita untuk menggunakan React Hooks.

React Hooks pada dasarnya adalah function yang disediakan React untuk mempermudah kita dalam menggunakan state dan fitur React lain seperti lifecylce method, context dll.

Kita akan tulis ulang code yang sudah dibuat sebelumnya, namun kali ini menggunakan React Function Component.

1. Membuat Component

Untuk membuat component kita menggunakan function javascript biasa / arrow function.

1import React from "react";
2
3const App = () => {
4  return (
5    <div>
6      <h1>Hello Devsaurus</h1>
7    </div>
8  );
9}
10
11export default App;

2. Data Handling

props

1import React from "react";
2
3const App = () => {
4  return (
5    <div>
6      <Greeting name="Brachio" />
7    </div>
8  );
9};
10
11const Greeting = props => {
12  const { name } = props;
13
14  return <h1>Hello {name}</h1>;
15};
16
17export default App;

state

Untuk membuat state pada React Function Component kita menggunakan React Hooks useState().

1import React, { useState } from "react";
2
3const App = () => {
4  const [isVisible, setVisible] = useState(false);
5  
6  return (
7    <div>
8      <Greeting name="Brachio" />
9    </div>
10  );
11};
12
13const Greeting = props => {
14  const { name } = props;
15
16  return <h1>Hello {name}</h1>;
17};
18
19export default App;

Dengan useState() kita dapat membuat dua hal sekaligus, state dengan nama isVisible dan method setState() bernama setVisible.

Namun perlu diperhatikan bahwa useState() menghasilkan dua value yang berpasangan, sehingga setVisible hanya bisa digunakan untuk mengupdate state isVisible.

Update state

1import React, { useState } from "react";
2
3const App = () => {
4  const [isVisible, setVisible] = useState(false);
5
6  const handleClick = () => {
7    setVisible(!isVisible);
8  };
9
10  return (
11    <div>
12      <button onClick={handleClick}>Say Hello</button>
13      {isVisible ? <Greeting name="Brachio" /> : <div />}
14      <br />
15    </div>
16  );
17};
18
19const Greeting = props => {
20  const { name } = props;
21
22  return <h1>Hello {name}</h1>;
23};
24
25export default App;

3. Lifecycle Methods

Pada React Function Component kita bisa mengganti lifecycle method componentDidMount() dan componentDidUpdate() dengan React Hook useEffect().

1import React, { useState, useEffect } from "react";
2
3const App = () => {
4  const [isVisible, setVisible] = useState(false);
5  const [text, setText] = useState("");
6
7  useEffect(() => {
8    setText("This text show after component is rendered")
9  }, [])
10
11  const handleClick = () => {
12    setVisible(!isVisible);
13  };
14
15  return (
16    <div>
17      <button onClick={handleClick}>Say Hello</button>
18      {isVisible ? <Greeting name="Brachio" /> : <div />}
19      <br />
20      <h2>{text}</h2>
21    </div>
22  );
23};
24
25const Greeting = props => {
26  const { name } = props;
27
28  return <h1>Hello {name}</h1>;
29};
30
31export default App;

Pilih Mana?

Banyak developer merekomendasikan untuk menggunakan Function Component karena syntax yang lebih simple dan dengan hadirnya React Hooks, sebuah Function Component dapat memiliki state, side effect dan lifecycle methods yang sebelumnya tidak bisa dilakukan.

Bahkan ada yang menyarankan untuk migrasi dari Class Component ke Function Component.

Tetapi semua kembali kepada kebutuhan dan kondisi.

React sudah ada sejak tahun 2013, mungkin diluar sana masih banyak React App yang menggunakan Class Component dan belum sepenuhnya migrasi ke Function Component atau bahkan tidak mungkin untuk migrasi karena ukuran project yang sudah terlalu besar. Pada kondisi ini memaksa migrasi dari Class Component ke Function Component bukanlah ide yang bagus.

Run JavaScript Code