React72 / 78

Container vs Presentational Pattern

Komponen Presentational khusus menangani tampilan UI (menerima props), sedangkan Komponen Container mengurus fetching data dan logika.

👀 Contoh dulu

function classifyComponent(hasState) {
  return hasState ? 'container' : 'presentational';
}
console.log(classifyComponent(false));

Hasilnya: presentational

💡 Pola ini berevolusi dengan hadirnya Custom Hooks untuk ekstraksi logika.

📝 Sekarang giliranmu

Buat fungsi classifyComponent(hasState) yang mengembalikan 'container' jika hasState bernilai true dan 'presentational' jika false.

Preview