Stateful dan Stateless Component di React

Melanjutkan Artikel yang sebelumnya, bagi teman – teman yang belum mengikuti instal-dan-perkenalan-react-js silahkan untuk membacanya terlebih dahulu supaya lebih memahami struktur React.js itu sendiri.

Artikel ini di khususkan untuk Pemula yang baru mengenal React.js dan ingin mempelajari React.js lebih jauh.

Apa itu Component ?

Mikro-entitas independen yang menjelaskan bagian dari UI. Sebuah aplikasi UI dapat dibagi menjadi lebih kecil komponen, dimana setiap komponen memiliki kode, struktur, dan API.

Kalo kita sederhanakan component itu adalah sebuah bagian-bagian kecil dalam sebuah halaman web kita.

Misalkan kita ingin membuat sebuah menu users yang di dalamnya ada table,tombol tambah , pagination, search dan lainnya.

Nah dengan component, kita dapat membaginya menjadi bagian-bagian yang lebih kecil lagi tanpa harus kita tulis kode itu semua kedalam satu file. sehingga component tersebut dapat di gunakan secara dinamis pada menu atau fitur lainnya.

Tujuannya adalah mengurangi penulisan kode yang sama dan mengecilkan size file project kita. react.js di rancang memang untuk pembuatan aplikasi yang besar dan kompleks.

Stateless Component

Stateless component atau functional component adalah sebuah fungsi javascript yang hanya mengambil sebuah inputan, biasanya functional component ini digunakan untuk membungkus component kecil seperti component table, button dan lainnya.

Contoh penulisan stateless component atau functional component

function HelloComponent{
   return <p>Hello Functional Component</p>
}

Atau bisa juga dengan penulisan ES6, sangat di sarankan untuk menggunakan penulisan ES6

const HelloComponent () => {
   return <p>Hello Functional Component</p>
}

Stateful Component

Stateful component digunakan untuk membungkus kode dari stateless component dengan cakupan yang lebih banyak dan besar.

class Hello extends React.Component {
    render() {
        return(
            <div>
                Hello Statefull Component
            </div>
        )
    }
}

Oke, bisa dimengertikan apa itu stateless dan stateful component. Selanjutnya kita akan membahas dynamic component menggunakan props.