Lewati ke konten utama

Frontend — Pertanyaan Interview

Pertanyaan umum beserta contoh jawaban. Gunakan language switcher (kanan atas) untuk English.

Teknis​

Apa itu React lifecycle?​

Proses yang dilalui sebuah komponen React saat mount (dibuat dan dimasukkan ke DOM), update (di-render ulang karena perubahan state/props), dan unmount (dihapus dari DOM). Dengan hooks, useEffect adalah tool utama untuk hook ke fase mount/update/cleanup.

Props vs state​

  • Props — data yang dikirim ke sebuah komponen dari parent-nya. Read-only di dalam komponen.
  • State — data yang dimiliki komponen. Mengubahnya (via setState / setter useState) memicu re-render.

useMemo vs useCallback​

Keduanya memoize lintas render, tapi:

  • useMemo memoize sebuah nilai — hasil dari komputasi.
  • useCallback memoize sebuah referensi fungsi — berguna ketika child component bergantung pada referential equality (mis. dibungkus React.memo).
const expensive = useMemo(() => heavy(a, b), [a, b]);
const onClick = useCallback(() => doX(id), [id]);

useState vs useRef​

  • useState memicu re-render saat nilainya berubah.
  • useRef menyimpan nilai mutable lintas render tanpa memicu re-render. Cocok untuk referensi DOM, timer, atau nilai apa pun yang tidak perlu ditrack React.

Apa itu React Fragment?​

<></> atau <React.Fragment>. Memungkinkan komponen mengembalikan beberapa children tanpa menambah DOM node tambahan seperti <div>.

Jelaskan CSR vs SSR vs SSG​

  • CSR (Client-Side Rendering) — browser menerima shell kosong dan JS, lalu merender halaman.
  • SSR (Server-Side Rendering) — server merender HTML per request, sudah terisi data saat dikirim.
  • SSG (Static Site Generation) — HTML dirender saat build time dan disajikan sebagai static file.

Apa itu Virtual DOM?​

Representasi UI di memory. React membandingkan tree baru dengan tree sebelumnya dan menerapkan set perubahan minimal ke real DOM — menghindari render ulang seluruh halaman.

Reflow vs Repaint​

  • Reflow (layout) — browser menghitung ulang geometry element. Dipicu oleh perubahan size/position, penambahan/penghapusan DOM node, perubahan font.
  • Repaint — pixel dicat ulang tanpa menghitung ulang layout. Dipicu oleh perubahan warna, background, visibility, shadow.

Reflow lebih mahal dari repaint — batch DOM read/write, dan gunakan transform/opacity untuk animasi.

preventDefault vs stopPropagation​

  • e.preventDefault() — membatalkan aksi default browser (mis. form submit reload halaman; anchor navigate).
  • e.stopPropagation() — menghentikan event dari bubbling up (atau capturing down) di DOM tree.

Keduanya independen — bisa dipanggil salah satu, keduanya, atau tidak sama sekali.

Apa itu event delegation?​

Pasang satu listener di parent dan periksa event.target untuk tahu descendant mana yang berinteraksi. Hemat memory, dan tetap bekerja untuk node yang belum ada saat listener dipasang.

Unit CSS: px, rem, em, vh, vw​

  • px — absolut, fixed.
  • rem — relatif terhadap font-size root <html>. Default terbaik untuk type yang responsive.
  • em — relatif terhadap font-size parent.
  • vh / vw — persentase viewport height/width.

Performa & UX​

Bagaimana menjaga komponen UI tetap performant dan usable?​

  1. Hindari re-render yang tidak perlu — React.memo, referensi stabil (useCallback/useMemo), key.
  2. Code-split — dynamic() / React.lazy() untuk layar non-kritis.
  3. State seperlunya — taruh state di tempat yang membutuhkan; lebih baik derive.
  4. Lazy-load asset — image (loading="lazy"), route, chart berat.
  5. Accessibility — ARIA label, navigasi keyboard, focus management.
  6. Testing — Jest + React Testing Library untuk behavior, Playwright untuk flow.
  7. Ukur — Lighthouse, React Profiler, Web Vitals.

Strategi kompatibilitas cross-browser​

  • Patuhi standar HTML/CSS.
  • Pakai Autoprefixer untuk vendor prefix.
  • Pakai Babel + core-js / polyfill untuk target lama bila perlu.
  • Terapkan progressive enhancement — fungsi dasar dulu, tambah fitur jika browser mendukung.
  • Pakai CSS reset / normalize.css untuk default yang konsisten.
  • Test di browser sungguhan (BrowserStack / Sauce Labs) untuk edge case.

Bagaimana debug bug kompleks di production?​

  1. Reproduce konsisten — tulis step persis, browser, OS.
  2. Baca bukti — DevTools Console, Network, Sources; cek log Sentry/Grafana.
  3. Bisect — commit terbaru, feature flag, environment (dev/staging vs prod).
  4. Inspect state — React DevTools untuk state dan props komponen.
  5. Isolasi — reproduksi minimal di sandbox kalau perlu.
  6. Konfirmasi fix — tambah regression test.

Behavioral​

Perkenalan diri​

Halo, nama saya Afif Makarim. Saat ini saya bekerja sebagai frontend developer dengan tech stack React/Next.js di Mobius Digital, ditempatkan di proyek Sinarmas Quantum Engine. Sebelumnya selama 3 tahun saya bekerja sebagai BAU Integration di LinkAja — mengsupport SIT/UAT partner dan menyiapkan test environment. Karir saya dimulai sebagai PHP programmer di AGIT selama setahun. Kombinasi antara frontend engineering dan integration memberi saya perspektif developer sekaligus integrator.

Strengths & Weakness​

Strengths

  • Adaptasi — saya pernah melewati transisi karir dari BAU integration ke frontend, yang memaksa saya beradaptasi cepat di lingkungan baru.
  • Fast learner — di pekerjaan saat ini saya sudah ditempatkan di 5 project berbeda, dan berhasil menghandle masing-masing dengan mempelajari dokumentasi dan teknologi tiap project.

Weakness

  • Di situasi baru saya kadang kurang percaya diri dan terlalu sering minta validasi ke manajer. Untuk menanganinya saya menempatkan diri di tugas yang menantang dan minta feedback lebih awal serta spesifik.

Kenapa kami harus merekrut kamu?​

Karena saya memiliki perspektif sebagai frontend developer sekaligus integrator dengan 3 tahun pengalaman BAU integration. Mix-and-match ini berguna setiap kali fitur tidak hanya menyentuh UI tapi juga API kontrak dengan partner.

Di mana kamu melihat dirimu dalam 5 tahun?​

Terus tumbuh dengan ekosistem frontend, tapi bergerak ke technical contribution di level lead — tidak hanya coding, tapi juga technical decision-making, mentoring, dan memperdalam fullstack agar bisa own end-to-end product.

Ceritakan bug sulit yang berhasil kamu pecahkan​

Di project e-sign (eKYC Web Sign), beberapa user gagal mencetak tanda tangan di dokumen yang mereka upload. Setelah reproduce di device user, ternyata ada versi Safari iPhone tertentu yang gagal load font tanda tangan. Saya dokumentasikan device yang gagal, ganti pendekatan rendering yang jalan di semua target, tambah regression test untuk path tersebut, dan ship fix di rilis berikutnya.

Behavioral (English)​

Tell me about yourself​

Hi, I'm Afif. I'm currently a frontend developer with the React/Next.js stack at Mobius Digital, placed on the Sinarmas Quantum Engine project. Before that I spent three years as a BAU Integration engineer at LinkAja, then started my career as a PHP programmer at AGIT for a year. The blend of frontend engineering and integration work gives me both a developer's and an integrator's perspective.

Strengths & Weaknesses​

  • Strengths: adaptability (career transition forced fast onboarding) and fast learning (5 different projects across one placement).
  • Weakness: lack of confidence in new situations; I push through by taking stretch tasks and asking for earlier, more specific feedback.

Siap menguji diri?​

Lanjut ke Kuis — 10 pertanyaan, ~5 menit.