Komponen React: Function Component dengan Contoh

Komponen React adalah fungsi JavaScript yang mengembalikan JSX: bagian UI yang bisa dipakai ulang, seperti tombol, kartu, atau satu halaman utuh. Kamu memakainya seperti tag HTML, <Profile />, dan React memanggil fungsinya untuk mengetahui apa yang harus ditampilkan di layar. Aplikasi dibangun dengan menaruh komponen di dalam komponen lain.

function Avatar() {
    return (
        <div
            style={{
                width: 48,
                height: 48,
                borderRadius: '50%',
                background: '#c7d2fe',
                display: 'grid',
                placeItems: 'center',
                fontWeight: 'bold',
            }}
        >
            AL
        </div>
    );
}

function Profile() {
    return (
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
            <Avatar />
            <div>
                <strong>Ada Lovelace</strong>
                <div>Wrote the first published program</div>
            </div>
        </div>
    );
}

export default function App() {
    return (
        <section>
            <h3>Team</h3>
            <Profile />
            <Profile />
        </section>
    );
}

App merender Profile dua kali, dan setiap Profile merender sebuah Avatar. Ubah inisial di dalam Avatar, dan kedua profil ikut berubah, karena keduanya memakai satu definisi yang sama. Untuk sekarang, setiap orang di daftar ini sama; halaman berikutnya, props, menunjukkan cara mengirim data tersendiri ke setiap salinan.

Menulis komponen

Function component punya dua syarat:

1. Namanya diawali huruf kapital: Profile, bukan profile.
2. Ia mengembalikan sesuatu yang bisa dirender React: JSX, string, angka, null (tidak merender apa pun), atau array dari semua itu.

function Welcome() {
    return <h1>Welcome back</h1>;
}

// Arrow functions work the same way
const Welcome = () => <h1>Welcome back</h1>;

Saat JSX-nya lebih dari satu baris, bungkus dengan tanda kurung setelah return. Tanpa tanda kurung, return yang diikuti baris baru akan mengembalikan undefined, dan semua setelahnya diabaikan.

Kenapa namanya harus berhuruf kapital

JSX melihat huruf pertama sebuah tag. Huruf kecil berarti elemen HTML bawaan, jadi <div> tetap <div>. Huruf kapital berarti "variabel di scope ini", jadi <Profile /> memanggil fungsi Profile milikmu. Beri nama komponen dengan huruf kecil, dan React justru membuat elemen HTML tak dikenal dengan nama itu:

function Greeting() {
    console.log('Greeting ran');
    return <span>Hello from Greeting</span>;
}

function greeting() {
    console.log('greeting ran');
    return <span>Hello from greeting</span>;
}

export default function App() {
    return (
        <div>
            <p>Capitalized: <Greeting /></p>
            <p>Lowercase: <greeting /></p>
        </div>
    );
}

Baris kedua hanya menampilkan label-nya, dan konsol hanya menampilkan Greeting ran. React menaruh tag <greeting> kosong di halaman dan tidak pernah memanggil fungsi berhuruf kecil itu. Build development juga memberi peringatan The tag <greeting> is unrecognized in this browser; pratinjau berjalan seperti build production, jadi kamu hanya melihat teks yang hilang. Ganti nama fungsinya menjadi Greetings dan tag-nya menjadi <Greetings /> untuk memperbaikinya.

Menyusun komponen

Komponen memang dibuat untuk disusun bersarang. Sebuah halaman adalah tree: App di puncak, lalu bagian-bagian layout, lalu bagian yang lebih kecil hingga ke tombol tunggal. Setiap komponen hanya mengenal bagian yang direndernya secara langsung, jadi kamu bisa memahaminya satu per satu.

import { useState } from 'react';

function LikeButton() {
    const [liked, setLiked] = useState(false);
    return (
        <button onClick={() => setLiked(!liked)}>
            {liked ? 'Liked' : 'Like'}
        </button>
    );
}

function Post({ title }) {
    return (
        <article style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h4 style={{ margin: '0 0 6px' }}>{title}</h4>
            <LikeButton />
        </article>
    );
}

export default function App() {
    return (
        <main>
            <Post title="Components are functions" />
            <Post title="JSX compiles to function calls" />
            <Post title="State lives in components" />
        </main>
    );
}

Setiap LikeButton punya state sendiri, jadi menyukai satu postingan tidak memengaruhi yang lain. Untuk menambahkan tombol share ke setiap postingan, kamu cukup menulisnya sekali lalu menambahkan <ShareButton /> di dalam Post.

Kapan memecah sebuah komponen

Tidak ada aturan pasti, tetapi ada beberapa tanda bahwa sebuah bagian layak menjadi komponen sendiri: markup yang sama muncul di dua tempat, sebagian JSX punya state sendiri (seperti tombol like di atas), atau fungsinya sudah begitu panjang sampai kamu harus scroll untuk melihat return-nya. Memecah berdasarkan tanda-tanda itu membuat setiap komponen cukup kecil untuk dibaca dalam satu layar. Memecah terlalu dini pun tidak banyak ruginya: komponen hanyalah fungsi, jadi menggabungkan dua komponen kembali itu mudah.

Export dan import komponen

Editor di sini hanya berisi satu file, tetapi proyek sungguhan menaruh komponen di file masing-masing. Sebuah file bisa punya satu default export dan berapa pun named export:

// Avatar.jsx
export default function Avatar({ initials }) {
    return <div className="avatar">{initials}</div>;
}

// Badge.jsx
export function Badge({ label }) {
    return <span className="badge">{label}</span>;
}
export function NewBadge() {
    return <Badge label="new" />;
}

// Profile.jsx
import Avatar from './Avatar.jsx';
import { Badge, NewBadge } from './Badge.jsx';

export default function Profile() {
    return (
        <div>
            <Avatar initials="AL" />
            <Badge label="admin" />
            <NewBadge />
        </div>
    );
}

Default export bisa diimpor dengan nama apa pun; named export diimpor di dalam kurung kurawal dengan nama persisnya. Tim biasanya memilih satu gaya lalu konsisten memakainya. Nama file umumnya sama dengan nama komponen: Avatar.jsx mengekspor Avatar.

Jaga komponen tetap murni

React mengharapkan komponen berperilaku seperti fungsi murni selama dirender: props dan state yang sama menghasilkan JSX yang sama, dan proses render tidak mengubah apa pun yang sudah ada sebelum render berjalan. React bisa merender sebuah komponen berkali-kali, pada waktu yang tidak kamu kendalikan, jadi komponen yang mengubah variabel luar selama render akan menghasilkan output berbeda setiap kali.

import { useState } from 'react';

let guest = 0;

function ImpureCup() {
    guest = guest + 1;
    return <li>Impure cup for guest #{guest}</li>;
}

function PureCup({ number }) {
    return <li>Pure cup for guest #{number}</li>;
}

export default function App() {
    const [renders, setRenders] = useState(1);

    return (
        <div>
            <ul>
                <ImpureCup />
                <ImpureCup />
                <ImpureCup />
            </ul>
            <ul>
                <PureCup number={1} />
                <PureCup number={2} />
                <PureCup number={3} />
            </ul>
            <button onClick={() => setRenders(renders + 1)}>Render again ({renders})</button>
        </div>
    );
}

Cangkir yang tidak murni dimulai dari 1, 2, 3. Klik tombolnya: tidak ada yang berubah pada tamunya, tetapi daftar yang tidak murni sekarang menunjukkan 4, 5, 6, karena setiap render menambah variabel guest yang dipakai bersama. Cangkir yang murni mendapat nomornya dari props dan tetap benar. Saat development, Strict Mode merender setiap komponen dua kali untuk memunculkan bug semacam ini; pratinjau berjalan seperti build production, jadi di sini penyimpangannya baru terlihat saat kamu merender lagi.

Mengubah sesuatu itu boleh, asal tidak selama render. Perbarui state di event handler, dan berinteraksi dengan dunia luar (timer, subscription, judul dokumen) di dalam effect.

Komponen vs elemen

Komponen adalah fungsinya, Profile. Elemen adalah apa yang dibuat JSX saat kamu menulis <Profile />: objek kecil yang berkata "render Profile dengan props ini". React membuat elemen, memanggil komponen yang disebutkannya, lalu mengubah hasilnya menjadi DOM. Kamu tidak pernah memanggil komponen sendiri sebagai Profile(); kamu menulis <Profile /> dan membiarkan React memanggilnya, agar React bisa melacak state-nya dan posisinya di tree.

Posisi itu penting. Contoh ini mendefinisikan komponen di dalam komponen lain, sebuah kesalahan yang umum:

import { useState } from 'react';

export default function App() {
    const [clicks, setClicks] = useState(0);

    function NameField() {
        const [text, setText] = useState('');
        return <input value={text} onChange={(e) => setText(e.target.value)} />;
    }

    return (
        <div>
            <NameField />
            <button onClick={() => setClicks(clicks + 1)}>Re-render App ({clicks})</button>
        </div>
    );
}

Ketik sesuatu, lalu klik tombolnya: teksmu hilang. Setiap render App membuat fungsi NameField yang benar-benar baru, jadi React melihat tipe komponen yang berbeda di posisi itu dan membuang yang lama beserta state-nya. Pindahkan NameField ke atas App, di level teratas file, dan teksnya tetap ada di setiap klik. Halaman tentang rendering menjelaskan bagaimana React memutuskan apa yang dipertahankan.

Function component dan class component

Sebelum hook hadir di React 16.8, komponen yang butuh state ditulis sebagai class:

import { Component } from 'react';

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

Class component masih berjalan di React 19, dan kamu akan menemuinya di codebase lama dan di error boundary, yang masih membutuhkan class. Kode baru memakai function component dengan hook seperti useState dan useEffect, yang melakukan tugas yang sama dengan kode yang lebih sedikit. Halaman class component memetakan setiap fitur class ke hook-nya.