Komponen fungsional di React — standar pengembangan modern

Apa itu Functional Component?

Functional Component (komponen fungsional) — adalah komponen React yang didefinisikan sebagai fungsi, menerima objek props dan mengembalikan elemen React. Sebelum React 16.8, komponen semacam itu disebut stateless (tanpa state), karena tidak dapat mengelola state internal.

Dengan munculnya hook di React 16.8 (Februari 2019), komponen fungsional mendapatkan akses ke state (useState), efek samping (useEffect), konteks (useContext), dan referensi (useRef). Istilah „stateless" sudah usang — komponen fungsional modern sepenuhnya mengelola state.

React secara resmi merekomendasikan komponen fungsional sebagai cara utama membuat komponen. Semua dokumentasi di react.dev, contoh, tutorial, dan API baru (Server Components, Actions) dibangun di atas pendekatan fungsional. Komponen kelas tidak dihapus, tetapi kemampuan baru React hanya tersedia melalui hook.

Membuat komponen fungsional

Komponen fungsional paling sederhana — fungsi yang mengembalikan JSX. Ia menerima props sebagai argumen, tidak memerlukan constructor, pemanggilan super, atau pengikatan this. Props tersedia langsung melalui argumen fungsi — tanpa this.props.

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

// Arrow function (common variant)
const Greeting = ({ name }) => (
  <h1>Hello, {name}!</h1>
);

Komponen dengan state

Untuk menambahkan state, gunakan useState. Hook mengembalikan tuple dua nilai: state saat ini dan fungsi setter. Tidak seperti this.setState pada kelas, useState mengganti nilai sepenuhnya, tidak menggabungkannya dengan yang sebelumnya.

import React, { useState } from 'react';

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

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

Hook dalam komponen fungsional

Hook adalah dasar React modern. Setiap hook menyelesaikan tugas tertentu: useState — state, useEffect — efek samping, useContext — akses ke konteks, useRef — referensi ke elemen DOM, useCallback dan useMemo — memoisasi.

useEffect untuk efek samping

useEffect secara bersamaan menggantikan componentDidMount, componentDidUpdate, dan componentWillUnmount. Argumen pertama — callback dengan efek, kedua — array dependensi. Jika array kosong, efek dijalankan sekali setelah pemasangan. Jika dependensi ditentukan — pada setiap perubahan salah satunya.

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

function UserData({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let cancelled = false;

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!cancelled) setUser(data);
      });

    // Cleanup - analog of componentWillUnmount
    return () => { cancelled = true; };
  }, [userId]); // Dependency

  return <div>{user?.name}</div>;
}

Hook kustom

Keuntungan utama komponen fungsional — penggunaan ulang logika melalui hook kustom. Jika dalam komponen kelas logika diduplikasi antara componentDidMount dan componentDidUpdate, dalam komponen fungsional logika diekstrak ke fungsi terpisah dengan prefiks use. Hook kustom adalah alternatif utama untuk HOC dan render props.

Komposisi daripada pewarisan

React merekomendasikan komposisi, bukan pewarisan, untuk penggunaan ulang kode antar komponen. Komponen fungsional sangat cocok untuk komposisi: satu komponen dapat berisi beberapa komponen lain, meneruskan props dan children kepada mereka.

Pola children — ketika komponen menerima elemen anak melalui prop children — diimplementasikan secara alami: function Layout({ children }). Analog slots dari Vue diimplementasikan melalui props-komponen bernama: function Page({ header, sidebar, content }).

Pewarisan di React praktis tidak digunakan. Bahkan komponen kelas, yang secara teknis mendukung extends, jarang membentuk hierarki lebih dalam dari satu tingkat. Komponen fungsional dengan komposisi sepenuhnya memenuhi kebutuhan penggunaan ulang kode tanpa pewarisan.

Optimasi kinerja

Komponen fungsional memiliki mekanisme optimasi bawaan. React.memo — analog PureComponent untuk fungsi: mencegah render ulang jika props tidak berubah (perbandingan dangkal). useMemo menyimpan hasil perhitungan di antara render.

import React, { useMemo } from 'react';

// React.memo - memoize component
const ExpensiveList = React.memo(({ items }) => {
  return <ul>
    {items.map(item =>
      <li key={item.id}>{item.name}</li>
    )}
  </ul>;
});

// useMemo - caching result
function Dashboard({ transactions }) {
  const summary = useMemo(() => {
    return transactions.reduce((acc, t) => acc + t.amount, 0);
  }, [transactions]);

  return <p>Total: {summary}</p>;
}

useCallback memoisasi fungsi callback agar tidak dibuat ulang setiap kali render. Ini sangat penting saat meneruskan fungsi ke komponen anak yang dibungkus dalam React.memo: tanpa useCallback, komponen anak akan render ulang setiap saat, karena referensi ke fungsi berubah.

Perbandingan komponen fungsional dan kelas

Perbedaan antara pendekatan melampaui sintaksis. Komponen fungsional — adalah closure: state dan efek terikat pada render tertentu. Komponen kelas — adalah this: state selalu diambil dari this.state, yang mungkin sudah kedaluwarsa saat callback asinkron dieksekusi.

Komponen fungsional memberikan alur eksekusi linier. Dalam komponen kelas, logika terkait sering tersebar di beberapa metode siklus hidup. Misalnya, langganan WebSocket diatur di componentDidMount dan dihapus di componentWillUnmount. Dalam komponen fungsional, kedua operasi — dalam satu useEffect dengan fungsi pembersihan.

TypeScript dan komponen fungsional

TypeScript bekerja lebih alami dengan komponen fungsional daripada dengan kelas. Pengetikan props — antarmuka untuk argumen fungsi. Tipe nilai yang dikembalikan — JSX.Element atau ReactNode. useState secara otomatis menyimpulkan tipe dari nilai awal.

import React, { useState } from 'react';

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  onClick: () => void;
}

const Button: React.FC<ButtonProps> =
  ({ label, variant = 'primary', onClick }) => (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );

TypeScript modern memungkinkan pengetikan useReducer dengan union type yang didiskriminasi, Generics dalam hook kustom, dan pemeriksaan ketat children melalui React.PropsWithChildren. Komponen fungsional dengan TypeScript memberikan keamanan tipe penuh tanpa abstraksi tambahan.