Skip to main content

Frontend — Interview Questions

Common questions with model answers. Use the language switcher (top-right) for Bahasa Indonesia.

Technical​

What is the React component lifecycle?​

The process a React component goes through when it is mounted (created and inserted into the DOM), updated (re-rendered due to state/prop changes), and unmounted (removed from the DOM). With hooks, useEffect is the primary tool to hook into mount/update/cleanup phases.

Props vs state​

  • Props — data passed into a component from its parent. Read-only inside the component.
  • State — data owned by the component. Mutating it (via setState / a useState setter) triggers a re-render.

useMemo vs useCallback​

Both memoize across renders, but:

  • useMemo memoizes a value — the result of a computation.
  • useCallback memoizes a function reference — useful when a child relies on referential equality (e.g., wrapped in React.memo).
const expensive = useMemo(() => heavy(a, b), [a, b]);
const onClick = useCallback(() => doX(id), [id]);

useState vs useRef​

  • useState triggers a re-render when the value changes.
  • useRef stores a mutable value across renders without triggering a re-render. Useful for DOM refs, timers, or holding any value you don't want React to track.

What is a React Fragment?​

<></> or <React.Fragment>. Lets a component return multiple children without adding an extra DOM node like <div>.

Explain CSR vs SSR vs SSG​

  • CSR (Client-Side Rendering) — the browser receives an empty shell and JS, then renders the page.
  • SSR (Server-Side Rendering) — the server renders HTML per request, sends it down already populated.
  • SSG (Static Site Generation) — HTML is rendered at build time and served as static files.

What is the Virtual DOM?​

An in-memory representation of the UI. React diffs the new tree against the previous one and applies the minimal set of changes to the real DOM — avoiding a full re-render of the page.

Reflow vs Repaint​

  • Reflow (layout) — the browser recalculates the geometry of elements. Triggered by size/position changes, adding/removing DOM nodes, font changes.
  • Repaint — pixels are repainted without recalculating layout. Triggered by color, background, visibility, shadow changes.

Reflow is more expensive than repaint — batch DOM reads/writes, prefer transform/opacity for animation.

preventDefault vs stopPropagation​

  • e.preventDefault() — cancels the default browser action (e.g., form submit reloads the page; anchor navigates).
  • e.stopPropagation() — stops the event from bubbling up (or capturing down) the DOM tree.

They are independent — you can call one, the other, or both.

What is event delegation?​

Attach one listener to a common ancestor and inspect event.target to figure out which descendant was interacted with. Saves memory, and works for nodes that don't exist yet at listener-attach time.

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

  • px — absolute, fixed.
  • rem — relative to the root <html> font-size. Best default for responsive type.
  • em — relative to the parent's font-size.
  • vh / vw — percentage of viewport height/width.

Performance & UX​

How do you keep UI components performant and usable?​

  1. Avoid unnecessary re-renders — React.memo, stable refs (useCallback/useMemo), keys.
  2. Code-split — dynamic() / React.lazy() for non-critical screens.
  3. Lean state — keep state where it's needed; prefer derived state.
  4. Lazy-load assets — images (loading="lazy"), routes, heavy charts.
  5. Accessibility — ARIA labels, keyboard navigation, focus management.
  6. Test — Jest + React Testing Library for behavior, Playwright for flow.
  7. Measure — Lighthouse, React Profiler, Web Vitals.

Cross-browser compatibility strategy​

  • Stick to standardized HTML/CSS.
  • Use Autoprefixer for vendor prefixes.
  • Use Babel + core-js / polyfills for older targets when needed.
  • Apply progressive enhancement — make the baseline work, add features where supported.
  • Use a CSS reset / normalize.css for consistent defaults.
  • Test on real browsers (BrowserStack / Sauce Labs) for edge cases.

How do you debug a complex bug in production?​

  1. Reproduce reliably — write down exact steps, browser, OS.
  2. Read the evidence — DevTools Console, Network, Sources; check Sentry/Grafana logs.
  3. Bisect — recent commits, feature flags, environments (dev/staging vs prod).
  4. Inspect state — React DevTools for component state and props.
  5. Isolate — minimal reproduction in a sandbox if needed.
  6. Confirm the fix — add a regression test.

Behavioral​

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 — supporting partner integrations through SIT/UAT and preparing test environments. I started my career as a PHP programmer at AGIT (Astra Graphia) for a year. The blend of frontend engineering and integration work gives me both a developer's and an integrator's perspective.

What are your strengths and weaknesses?​

Strengths

  • Adaptability — I've gone through a real career transition (BAU integration → frontend), which forced me to learn fast in new environments.
  • Fast learning — across my current placement I've handled 5 different projects, learning each stack's documentation and conventions from scratch.

Weakness

  • In unfamiliar situations I sometimes lack confidence and over-ask my manager for validation. I work on this by deliberately taking on stretch tasks and seeking earlier, more specific feedback.

Why should we hire you?​

I bring two perspectives in one hire: frontend engineering (React, Next.js, testing, CI/CD) and integration / requirement-gathering (three years working directly with partners, system analysts, and PMs). That's a mix that's useful any time a feature spans more than just the UI.

Where do you see yourself in 5 years?​

Continuing to grow with the frontend ecosystem, but moving toward lead-level technical contribution — not only coding but also technical decision-making, mentoring, and going deeper into fullstack so I can own end-to-end product work.

Tell me about a challenging bug you solved​

On the e-sign project (eKYC Web Sign), some users couldn't render the signature on uploaded documents. After reproducing on the user's device, we discovered specific iPhone Safari versions failed to load the signature font. I documented the failing devices, swapped in a rendering approach that worked across all targets, added a regression test for that path, and shipped the fix in the next release.

Behavioral (Bahasa Indonesia)​

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 sudah 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 dan 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.

Apa achievement terbesar di pekerjaan saat ini?​

Sebagai frontend developer ikut terlibat dalam project pengembangan sistem fitur penagihan ke business unit yang secara tidak langsung berdampak pada income perusahaan. Juga berhasil memaintain 95%+ unit test coverage untuk menjaga kualitas code. Sebagai BAU integration: bagian dari tim integrasi yang sukses mendeliver 100+ partner/merchant dan menghandle 100% integration issue setelah partner live.

Ready to test yourself?​

Head over to the Quiz — 10 questions, ~5 minutes.