Penggunaan Class dan Function Component React Native

Pada versi React Native 0.62 yang beberapa waktu yang lalu direlease, kita melihat di halaman dokumentasi React Native, pembuatan Component lebih mengutamakan penggunaan Function daripada Class.

Memang kalau dilihat kodenya, Function Component lebih sedikit dalam penulisan kode dibandingkan Class Component. Berikut contohnya :

Basic Function Component

import React from 'react';
import { Text } from 'react-native';

export default function Cat() {
  return (
    <Text>Hello, I am your cat!</Text>
  );
}

Basic Class Component

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class Cat extends Component {
  render() {
    return (
      <Text>Hello, I am your cat!</Text>
    );
  }
}

Contoh diatas adalah contoh Basic Component dari masing-masing metode. Terlihat bahwa Function Component lebih ringkas secara penulisan Kode. Hal inilah yang membuat ReactJS juga mulai mengalihkan Class Component menjadi Function Component.

Jadi, mengapa sebaiknya kita mulai beralih ke Function Component ?

Lebih mudah dibaca dan dipahami, karena menggunakan pure Javascript Function
Penulisan kode yang lebih ringkas
Penggunaan State menjadi lebih mudah
Penggunaan Lifecycle juga lebih mudah
Performance yang lebih baik

Pada point 4 dan 5 diatas, React memiliki metode baru yaitu React Hook, dimana dengan Hook inilah bekerja dengan State dan Lifecycle pada Functional Component.

Contoh penggunaan State pada React Hook

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Keyword “useState” adalah tanda bawah constanta count adalah sebuah State, dan setCount adalah function yang nanti akan digunakan untuk mengubah nilai state count.

Berbeda ketika kita menggunakan Class, dimana kita harus menggunakan method atau function setState untuk mengunah nilai state.

Cukup mudah bukan ?? Jadi mulai sekarang kamu sebaiknya sudah mulai beralalih ke Functional Component ya 🙂

Baca juga Artikel React Native lainnya :

Related posts: