Function Component dalam Satu File yang Simpel dan Efektif

Dalam React, komponen adalah bagian fundamental dalam membangun UI. Ada dua jenis utama komponen di React: Class Component dan Function Component. Seiring berkembangnya React, Function Component menjadi lebih populer karena lebih ringan, lebih mudah dibaca, dan lebih efektif, terutama setelah diperkenalkannya React Hooks.

Artikel ini akan membahas cara membuat Function Component dalam satu file dengan struktur yang simpel dan tetap efektif untuk proyek React.'ds's

1. Kenapa Harus Menggunakan Function Component?

✅ Lebih ringan – Function Component tidak menggunakan this, sehingga lebih sederhana dibanding Class Component.
✅ Lebih mudah dibaca – Dengan kode yang lebih singkat dan tidak terlalu banyak boilerplate, Function Component lebih mudah dipahami.
✅ Dukungan Hooks – Function Component dapat menggunakan fitur seperti useState dan useEffect, yang sebelumnya hanya tersedia di Class Component.
✅ Mudah digunakan kembali – Bisa dipisah dan digunakan di berbagai bagian aplikasi.

Misalnya, berikut adalah Class Component:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

Kita bisa menulis ulang ini sebagai Function Component, yang jauh lebih ringkas:

import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

Terlihat lebih simpel, bukan?

2. Membuat Function Component dalam Satu File

Untuk menjaga kode tetap terorganisir, kita bisa membuat Function Component dalam satu file tanpa harus memisahkannya ke banyak file.

📌 Contoh Function Component Sederhana

Misalnya kita ingin membuat komponen sederhana yang menampilkan teks.

import React from 'react';

function Message() {
  return <p>Ini adalah function component sederhana!</p>;
}

export default Message;

Komponen ini bisa langsung diimpor dan digunakan di dalam App.js:

import React from 'react';
import Message from './Message';

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <Message />
    </div>
  );
}

export default App;

3. Function Component dengan Props

Function Component bisa menerima props (parameter) untuk membuatnya lebih fleksibel.

import React from 'react';

function UserCard({ name, age }) {
  return (
    <div>
      <h2>Nama: {name}</h2>
      <p>Usia: {age}</p>
    </div>
  );
}

export default UserCard;

Komponen ini bisa digunakan di App.js seperti ini:

<UserCard name="John Doe" age={25} />

Props memungkinkan kita membuat komponen yang dinamis dan reusable.

4. Function Component dengan State (Menggunakan Hooks)

Dulu, hanya Class Component yang bisa memiliki state, tetapi sekarang Function Component bisa menggunakan React Hooks untuk mengelola state.

Misalnya, kita membuat counter sederhana menggunakan useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default Counter;

Penjelasan:

• useState(0) → Mendefinisikan state count dengan nilai awal 0.
• setCount(count + 1) → Mengubah nilai count setiap kali tombol ditekan.
• Tidak perlu this.setState() seperti di Class Component.

5. Function Component dengan Lifecycle (Menggunakan useEffect)

Dulu, dalam Class Component kita menggunakan lifecycle methods seperti componentDidMount(), sekarang kita bisa menggunakan useEffect() dalam Function Component.

Misalnya, kita ingin menjalankan efek setelah komponen dirender pertama kali:

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setData("Data berhasil diambil!");
    }, 2000);
  }, []);

  return (
    <div>
      <h2>{data ? data : "Mengambil data..."}</h2>
    </div>
  );
}

export default DataFetcher;

Penjelasan:

• useEffect(() => {...}, []) → Berjalan sekali saat komponen pertama kali dirender.
• setTimeout() mensimulasikan pengambilan data dari server setelah 2 detik.

Dengan useEffect, kita bisa menangani efek samping seperti fetching data, event listener, atau update DOM dengan mudah.

6. Kapan Harus Menggunakan Function Component dalam Satu File?

✅ Gunakan Function Component dalam satu file jika:

• Komponen sederhana dan tidak memiliki terlalu banyak fungsi.
• Ingin menghindari boilerplate yang tidak perlu seperti di Class Component.
• Tidak ada kompleksitas yang membutuhkan file terpisah.

❌ Pisahkan ke beberapa file jika:

• Komponen memiliki banyak fungsi dan sangat panjang.
• Komponen digunakan berulang kali di berbagai bagian aplikasi.
• Proyek sudah cukup besar, sehingga lebih mudah dikelola jika terpisah.

7. Kesimpulan

• Function Component lebih ringan, lebih mudah dibaca, dan mendukung React Hooks.
• Props memungkinkan komponen menerima data dinamis.
• State dan Lifecycle dalam Function Component bisa dikelola dengan useState dan useEffect.
• Gunakan Function Component dalam satu file jika komponen kecil dan tidak terlalu kompleks.
• Jika proyek berkembang, pertimbangkan untuk memisahkan komponen ke dalam file terpisah.

Dengan memahami konsep ini, kamu bisa membangun komponen React yang lebih modular, efektif, dan mudah dipahami!