# Optimasi Performa React (React / Next.js)

> React.memo, useMemo, useCallback, lazy loading, code splitting, React DevTools Profiler

- 22 pertanyaan wawancara
- Senior
- [Pertanyaan Wawancara: React / Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara.md)

## 1. 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.

## 2. 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.

## 3. 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.

## 19 pertanyaan lagi tersedia

- 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?

Daftar gratis: https://sharpskill.dev/id/login

## Topik wawancara React / Next.js lainnya

- [Dasar-Dasar JavaScript](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/javascript-essentials.md): 25 pertanyaan, Junior
- [Dasar-Dasar React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-fundamentals.md): 20 pertanyaan, Junior
- [React Hooks](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-hooks.md): 22 pertanyaan, Junior
- [Siklus hidup komponen](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/component-lifecycle.md): 18 pertanyaan, Junior
- [React Router](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-router.md): 20 pertanyaan, Junior
- [Manajemen state dengan Context](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/state-management-context.md): 18 pertanyaan, Junior
- [Form & Controlled Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/forms-controlled-components.md): 20 pertanyaan, Mid-Level
- [Pengambilan Data & API](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/fetching-data-api.md): 20 pertanyaan, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-query-tanstack.md): 20 pertanyaan, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/styling-css-in-js.md): 18 pertanyaan, Mid-Level
- [Dasar-dasar Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-fundamentals.md): 25 pertanyaan, Mid-Level
- [TypeScript dengan React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/typescript-react.md): 20 pertanyaan, Mid-Level
- [Data Fetching Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-data-fetching.md): 24 pertanyaan, Mid-Level
- [Server Actions Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-server-actions.md): 20 pertanyaan, Mid-Level
- [Routing & Navigasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-routing-navigation.md): 22 pertanyaan, Mid-Level
- [API Routes Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-api-routes.md): 20 pertanyaan, Mid-Level
- [Metadata & SEO di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-metadata-seo.md): 18 pertanyaan, Mid-Level
- [Middleware & Auth di Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-middleware-auth.md): 22 pertanyaan, Mid-Level
- [Pengujian React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-testing.md): 20 pertanyaan, Mid-Level
- [Zustand State Management](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/zustand-state-management.md): 18 pertanyaan, Mid-Level
- [Error Boundaries & Error Handling](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-error-boundaries.md): 18 pertanyaan, Senior
- [Advanced React Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/advanced-react-patterns.md): 20 pertanyaan, Senior
- [Fitur Lanjutan Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-advanced-features.md): 24 pertanyaan, Senior
- [Deployment & Produksi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-deployment-production.md): 20 pertanyaan, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-architecture-patterns.md): 22 pertanyaan, Senior
- [React Server Components](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-server-components.md): 26 pertanyaan, Senior
- [Internasionalisasi Next.js](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/nextjs-internationalization.md): 20 pertanyaan, Senior
- [Keamanan React & Praktik Terbaik](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-security-best-practices.md): 22 pertanyaan, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-performance-optimization