Optimasi Performa React
React.memo, useMemo, useCallback, lazy loading, code splitting, React DevTools Profiler
1Apa peran utama React.memo?
Apa peran utama React.memo?
Jawaban
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.
2Apa perbedaan utama antara useMemo dan useCallback?
Apa perbedaan utama antara useMemo dan useCallback?
Jawaban
useMemo melakukan memoize pada hasil sebuah fungsi (nilai yang dikembalikan), sedangkan useCallback melakukan memoize pada fungsi itu sendiri. useMemo digunakan untuk mengoptimalkan komputasi yang mahal, sedangkan useCallback digunakan untuk menstabilkan referensi fungsi yang diteruskan sebagai props, mencegah re-rendering yang tidak perlu pada komponen anak yang sudah di-memoize.
3Dalam kasus apa penggunaan React.memo bisa kontraproduktif?
Dalam kasus apa penggunaan React.memo bisa kontraproduktif?
Jawaban
React.memo bisa kontraproduktif pada komponen yang menerima props berbeda di setiap render, karena biaya perbandingan dangkal props ditambahkan tanpa manfaat (komponen akan tetap di-render ulang). Lebih baik menggunakan React.memo untuk komponen yang sering menerima props yang sama dan memiliki proses render yang mahal.
Mengapa menggunakan useCallback untuk fungsi yang diteruskan sebagai prop ke komponen yang di-memoize dengan React.memo?
Apa keuntungan utama code splitting dengan React.lazy?
+19 pertanyaan wawancara
Topik wawancara React / Next.js lainnya
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
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
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis