Advanced React Patterns
Compound Components, Render Props, HOC, Custom Hooks patterns, Controlled/Uncontrolled, Provider, State Reducer, Props Getters
1What is the Compound Components pattern?
What is the Compound Components pattern?
Answer
The Compound Components pattern allows creating components that share implicit state via React Context, without passing props explicitly. This pattern is used in libraries like Radix UI and Headless UI to provide a flexible and composable API. Child components can access shared state automatically, enabling structure customization without losing common logic.
2What is the principle of the Render Props pattern?
What is the principle of the Render Props pattern?
Answer
The Render Props pattern involves passing a function as a prop that returns a React element, allowing the parent component to share its logic with the child component. This function receives data or methods from the parent as parameters. This pattern was very popular before hooks arrived, notably with libraries like React Router and Downshift.
3What are Higher-Order Components (HOC)?
What are Higher-Order Components (HOC)?
Answer
Higher-Order Components are functions that take a component as parameter and return a new component enhanced with additional props or behaviors. This pattern enables reusing logic between components without code duplication. HOCs are used for cross-cutting concerns like authentication, tracking, or permission management.
What is the difference between a controlled and uncontrolled component?
What is the Provider pattern?
+17 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free