Perbedaan Class Component Dan Function Component

Perkenalan dengan react ternyata tidak semudah yang dibayangkan karena harus mengulang perkenalan lagi dengan javascript bagi yang sudah lama tidak terjun di pemograman. Jadi kita harus lebih banyak tentang keduanya dan menulis tentang mereka. Pada artikel ini kita akan bedah apa saja yang menjadi kebingungan bagi para pemula reactjs dan yang berselih tentang lebih baik kapan menggunakan metode class dan function.

Dalam membuat component react ada 2 cara yaitu dengan class component dan function component. Contoh keduanya bisa langsung lihat di bagian perbedaan script agar lebih tahu perbedaan mereka.

Perbedaan Script
Secara penulisan script jelas sangat berbeda dari mana mereka dan bagaimana harus di tulis kedalam script. Karena keduanya sama-sama merender JSX yang sudah kita bahas dalam lifecyle method, namun untuk class component kita harus mendefinisikan extend React.Component dari library React. Selain itu class component harus menggunakan metode render().

import React {Component} from 'React';
import Person from './Person';

class ParentComponent extends Component {
render(){
    return (
        <div>
        <h1>{this.props.header}</h1>
        <Child name='amin'/>
        <Child name='irul'/>
        <Child name='fadil'/>
        </div>
        )
    }
}

Pada script diatas bahwa class component harus extend React.Component agar dapat merender apapun. Kita bisa lihat menggunakan destrukturisasi ES6 untuk extend React.Component dengan menggunakan {component} yang di import dari React. Sedangkan function component sama seperti script yang dirender diatas dan itu cukup sederhana. Perbedaan lain diatas adalah pada saat pemanggilan props, class component menggunakn keyword this.props dan function component bisa dengan this atau tidak.

import React from "React";
const Child = () => {
  return <div>test</div>;
};
export default Child;

Pada script diatas dengan style javascript ES6 bisa dilihat kembali bahwa function component tanpa menggunakan extend React.Component dan tidak perlu metode render().

Props
Pada proses penurunan props mereka mempunyai cara yang berbeda. Karena props ini lumayan rumit terutama jika aplikasi sudah tumbuh dalam kompleksitas dan size. Mari kita lihat cara mereka menggunakan di class component dan function component yang harus menurunkan props sebagai argument dalam fungsi secara eksplisit.

Contoh lanjutan script diatas

import React from "React";
const Child = (props) => {
  return <div>{props.name}</div>;
};
export default Child;

Berbeda dengan class component yang tidak secara eksplisit memberikan pass 'props' sebagai argument, karena ia sudah memiliki akses. Kita bisa lihat contoh script class diatas taq h1 menggunakan {this.props.header}, header adalah prop yang diturunkan dari component App.js.

class App extends Component {
  render() {
    return (
      <div className="App">
        <Child header="Daftar Nama:" />
      </div>
    );
  }
}

  Output keseluruhan program:<br>
  Daftar Nama:
  Amin
  Irul
  Fadil

Dari contoh diatas sekalian dapat dijelaskan bahwa function component hanya dapat memakai istilah props sebab function component disebut stateless component. Sedangkan class component bisa menggunakan props dan state. Penjelasan state dan props sudah dibahas disini.

Lifecycle Method
Konsep lifecyle ini hanya bisa dilakukan di class component, didalamnya terdapat beberapa fase yang secara berurutan akan melakukan proses terjadinya render di React. Pembahasan lifecyle. Diagram lifecyle terdapat 3 fase yaitu

format=“webp”

1. Fase initial / mounting.

Adalah fase ketika component dibuat atau pertama kali di render ke DOM.

2. Fase updating

Pada fase ini masih ada keterikatan render dengan fase mounting akan berubah ketika ada perubahan dari state.

3. Fase unmounting

Ketika component tidak digunankan lagi atau dilepas disebut componentWillUnmount.

Dan apa yang terjadi di function component jika tidak bisa melakukan seperti yang dilakukan class component. Penggunaan proses lifecycle dapat digantikan dengan hooks yang hanya berjalan di dalam function component. Hooks useEffect akan memberikan perilaku seperti lifecycle method dalam merender component dan kedengaranya cukup sederhana. Mari kita lihat contoh script keduanya. Contoh lifecyle method componentDidMount() akan dieksekusi setelah dirender.

import React, { Component } from "React";
class App extends Component {
  state = {
    isVisible: false,
    text: "",
  };
  componentDidMount() {
    this.setState({ ...this.state, text: "ini tampil setelah terjadi render" });
  }
  handleClick = () => {
    this.setState({ isVisible: !this.state.isVisible });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>klik disini</button>
        {this.state.isVisible ? <Chil name="irulfadil" /> : <div />}
        <br />
        <h2>{this.state.text}</h2>
      </div>
    );
  }
}

class Chil extends Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}
export default App;

Contoh useEffect di function component

import React, { useEffect, useState } from "React";
const App = () => {
  const [state, setState] = useState("");
  const [isVisible, setVisible] = useState(false);

  useEffect(() => {
    setState("tampil setelah dirender");
  }, []);

  handleClick = () => {
    setVisible(true);
  };
  return (
    <div>
      <button onClick={handleClick}>klik disini</button>
      {isVisible ? <Chil name="irulfadil" /> : <div />}
      <br />
      <h2>{state}</h2>
    </div>
  );
};

function Chil(props) {
  return <h1>Hello {props.name}</h1>;
}
export default App;

Dan perlu diketahui bahawa proses dibalik layar class component tedapat 3 fase yaitu mounting , updating dan unmounting tetapi jika kita menggunakan function component cukup dengan hooks useEffect sudah mewakili ketiganya. Ini semuanya dikembalikan kepada developer dari kebutuhan system yang dikembangkan, untuk saya pribadi prefer ke function component karena pada dasarnya javascript adalah pemograman fungsional.

Pada artikel selanjutnya kita bahas tentang state dan props dalam komponen.