Question 1

Apa perbedaan utama antara let dan var?

Accepted Answer

let mendeklarasikan variabel dengan cakupan blok, yang berarti variabel tersebut hanya ada di dalam blok tempat ia didefinisikan (di antara kurung kurawal). var memiliki cakupan fungsi, yang dapat menyebabkan bug tak terduga karena variabel dapat diakses di seluruh fungsi. Menggunakan let secara default mencegah masalah hoisting dan kebocoran variabel dalam loop atau kondisional.

Question 2

Apa itu JSX di React?

Accepted Answer

JSX adalah ekstensi sintaks JavaScript yang memungkinkan penulisan markup mirip HTML langsung di dalam kode JavaScript. JSX ditransformasi menjadi pemanggilan fungsi React.createElement oleh Babel saat kompilasi. Menggunakan JSX membuat kode lebih mudah dibaca dan memungkinkan deteksi kesalahan saat kompilasi melalui typing, sekaligus menggabungkan kekuatan JavaScript dengan sintaks yang familiar.

Question 3

Apa itu hook useState di React?

Accepted Answer

useState adalah React hook yang mengelola state lokal dalam komponen fungsional. Berbeda dengan variabel JavaScript biasa yang direset pada setiap render, useState mempertahankan nilai state antara render yang berurutan. Hook ini mengembalikan array yang berisi nilai state saat ini dan fungsi untuk memperbaruinya, secara otomatis memicu render ulang komponen ketika state berubah.

Question 4

Apa itu mounting dalam sebuah komponen React?

Accepted Answer

Mounting adalah fase di mana komponen dibuat dan dimasukkan ke dalam DOM untuk pertama kalinya. Selama fase ini, React menginisialisasi state, mengeksekusi kode konstruksi, dan melakukan render pertama. Ini adalah saat yang ideal untuk memicu panggilan API atau menginisialisasi subscription melalui useEffect.

Question 5

Apa itu CSS Module di React?

Accepted Answer

CSS Modules secara otomatis menghasilkan nama kelas yang unik dengan menambahkan hash pada nama kelas, yang mencegah konflik style antar komponen. Setiap file CSS Module memiliki scope lokal tersendiri, berbeda dari stylesheet global tradisional. Pendekatan ini memungkinkan penulisan style modular tanpa risiko penimpaan tidak sengaja di komponen lain.

Question 6

Apa itu App Router di Next.js?

Accepted Answer

App Router adalah sistem routing baru di Next.js 13+ berdasarkan direktori app/. Ini menggantikan Pages Router dan memperkenalkan Server Components secara default, layout bersama, dan model routing yang lebih fleksibel dengan konvensi file seperti page.tsx, layout.tsx, dan loading.tsx.

Question 7

Apa sintaks yang benar untuk mengetik props komponen React?

Accepted Answer

Interface Props diikuti dengan pengetikan fungsi dengan Props sebagai parameter adalah sintaks standar yang direkomendasikan. Pendekatan ini memberikan inferensi tipe yang sangat baik dan memungkinkan penggunaan ulang tipe Props dengan mudah di tempat lain dalam kode. Ini lebih eksplisit daripada React.FC dan memberikan kontrol lebih baik atas pengetikan children.

Question 8

Apa peran utama React.memo?

Accepted Answer

React.memo adalah Higher-Order Component yang melakukan memoize pada hasil render sebuah komponen. Ia melakukan perbandingan dangkal pada props dan melewatkan re-rendering jika props tidak berubah. Sangat berguna untuk mengoptimalkan komponen anak yang mahal dan sering menerima props yang sama.

Question 9

Apa itu Error Boundary di React?

Accepted Answer

Error Boundary adalah komponen kelas React yang menangkap error JavaScript yang terjadi di pohon komponen anaknya, menampilkan UI fallback, dan mencegah seluruh aplikasi crash. Ia menggunakan metode componentDidCatch() dan getDerivedStateFromError() untuk mengintersep dan menangani error rendering.

Question 10

Apa itu pola Compound Components?

Accepted Answer

Pola Compound Components memungkinkan pembuatan komponen yang berbagi state implisit melalui React Context, tanpa meneruskan props secara eksplisit. Pola ini digunakan di library seperti Radix UI dan Headless UI untuk menyediakan API yang fleksibel dan dapat dikombinasikan. Komponen anak dapat mengakses state bersama secara otomatis, memungkinkan kustomisasi struktur tanpa kehilangan logika umum.

Pertanyaan wawancara React / Next.js

Siap untuk wawancara React / Next.js?

Jelajahi semua topik React / Next.js

Dasar-Dasar JavaScript

Dasar-Dasar React

React Hooks

Siklus hidup komponen

React Router

Manajemen state dengan Context

Form & Controlled Components

Pengambilan Data & API

React Query (TanStack Query)

Styling & CSS-in-JS

Dasar-dasar Next.js

TypeScript dengan React

Data Fetching Next.js

Server Actions Next.js

Routing & Navigasi Next.js

API Routes Next.js

Metadata & SEO di Next.js

Middleware & Auth di Next.js

Pengujian React

Zustand State Management

Optimasi Performa React

Error Boundaries & Error Handling

Advanced React Patterns

Fitur Lanjutan Next.js

Deployment & Produksi Next.js

Architecture & Design Patterns

React Server Components

Internasionalisasi Next.js

Keamanan React & Praktik Terbaik

Kuasai React / Next.js untuk wawancara berikutnya