# Advanced React Patterns (React / Next.js)

> Compound Components, Render Props, HOC, Custom Hooks patterns, Controlled/Uncontrolled, Provider, State Reducer, Props Getters

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

## 1. Apa itu pola Compound Components?

**Jawaban**

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.

## 2. Apa prinsip dari pola Render Props?

**Jawaban**

Pola Render Props melibatkan pengiriman fungsi sebagai prop yang mengembalikan elemen React, memungkinkan komponen induk berbagi logikanya dengan komponen anak. Fungsi ini menerima data atau metode dari induk sebagai parameter. Pola ini sangat populer sebelum hooks hadir, terutama dengan library seperti React Router dan Downshift.

## 3. Apa itu Higher-Order Components (HOC)?

**Jawaban**

Higher-Order Components adalah fungsi yang mengambil komponen sebagai parameter dan mengembalikan komponen baru yang diperkaya dengan props atau perilaku tambahan. Pola ini memungkinkan penggunaan kembali logika antar komponen tanpa duplikasi kode. HOC digunakan untuk kepentingan lintas-fungsi seperti autentikasi, pelacakan, atau manajemen izin.

## 17 pertanyaan lagi tersedia

- Apa perbedaan antara komponen terkontrol dan tidak terkontrol?
- Apa itu pola Provider?

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
- [Optimasi Performa React](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-performance-optimization.md): 22 pertanyaan, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/id/technologies/react-next/pertanyaan-wawancara/react-error-boundaries.md): 18 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/advanced-react-patterns