# Advanced React Patterns (React / Next.js)

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

- 20 mülakat soruları
- Senior
- [Mülakat Soruları: React / Next.js](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari.md)

## 1. Compound Components pattern nedir?

**Cevap**

Compound Components pattern, React Context aracılığıyla örtük state paylaşan bileşenler oluşturmayı sağlar; props'ları açıkça geçirmeye gerek yoktur. Bu pattern, esnek ve birleştirilebilir bir API sunmak için Radix UI ve Headless UI gibi kütüphanelerde kullanılmaktadır. Alt bileşenler paylaşılan state'e otomatik olarak erişebilir; bu da ortak mantığı kaybetmeden yapı özelleştirmesine olanak tanır.

## 2. Render Props pattern'ının prensibi nedir?

**Cevap**

Render Props pattern, bir React elementi döndüren fonksiyonu prop olarak geçirerek üst bileşenin mantığını alt bileşenle paylaşmasını sağlar. Bu fonksiyon, üstten gelen verileri veya metotları parametre olarak alır. Bu pattern, hooks'ların gelmesinden önce, özellikle React Router ve Downshift gibi kütüphanelerle çok popülerdi.

## 3. Higher-Order Components (HOC) nedir?

**Cevap**

Higher-Order Components, bir bileşeni parametre olarak alan ve ek props veya davranışlarla zenginleştirilmiş yeni bir bileşen döndüren fonksiyonlardır. Bu pattern, kod tekrarı olmadan bileşenler arasında mantığın yeniden kullanılmasını sağlar. HOC'lar kimlik doğrulama, izleme veya izin yönetimi gibi kesişen konular için kullanılır.

## 17 soru daha mevcut

- Kontrollü ve kontrolsüz bileşen arasındaki fark nedir?
- Provider pattern nedir?

Ücretsiz kaydol: https://sharpskill.dev/tr/login

## Diğer React / Next.js mülakat konuları

- [JavaScript Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/javascript-essentials.md): 25 soru, Junior
- [React Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-fundamentals.md): 20 soru, Junior
- [React Hooks](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-hooks.md): 22 soru, Junior
- [Bileşen yaşam döngüsü](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/component-lifecycle.md): 18 soru, Junior
- [React Router](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-router.md): 20 soru, Junior
- [Context ile state yönetimi](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/state-management-context.md): 18 soru, Junior
- [Formlar ve Controlled Components](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/forms-controlled-components.md): 20 soru, Mid-Level
- [Veri Çekme ve API](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/fetching-data-api.md): 20 soru, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-query-tanstack.md): 20 soru, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/styling-css-in-js.md): 18 soru, Mid-Level
- [Next.js Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-fundamentals.md): 25 soru, Mid-Level
- [React ile TypeScript](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/typescript-react.md): 20 soru, Mid-Level
- [Next.js Veri Çekme](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-data-fetching.md): 24 soru, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-server-actions.md): 20 soru, Mid-Level
- [Next.js Routing ve Navigasyon](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-routing-navigation.md): 22 soru, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-api-routes.md): 20 soru, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-metadata-seo.md): 18 soru, Mid-Level
- [Next.js Middleware ve Auth](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-middleware-auth.md): 22 soru, Mid-Level
- [React Testing](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-testing.md): 20 soru, Mid-Level
- [Zustand State Management](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/zustand-state-management.md): 18 soru, Mid-Level
- [React Performans Optimizasyonu](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-performance-optimization.md): 22 soru, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-error-boundaries.md): 18 soru, Senior
- [Next.js Gelişmiş Özellikler](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-advanced-features.md): 24 soru, Senior
- [Next.js Dağıtım & Üretim](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-deployment-production.md): 20 soru, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-architecture-patterns.md): 22 soru, Senior
- [React Server Components](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-server-components.md): 26 soru, Senior
- [Next.js Uluslararasılaştırma](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-internationalization.md): 20 soru, Senior
- [React Güvenlik & En İyi Uygulamalar](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-security-best-practices.md): 22 soru, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/advanced-react-patterns