Architecture & Design Patterns
Feature-based structure, atomic design, clean architecture, SOLID principles, dependency injection
1What is Atomic Design in React?
What is Atomic Design in React?
Answer
Atomic Design organizes React components into 5 hierarchical levels: atoms (buttons, inputs), molecules (simple forms), organisms (header, footer), templates (page layout), and pages (concrete instances). This methodology provides a consistent and scalable structure for the design system. It facilitates component reusability and collaboration between designers and developers by sharing a common vocabulary.
2What is the main characteristic of a feature-based architecture?
What is the main characteristic of a feature-based architecture?
Answer
Feature-based architecture groups all files related to a functionality in the same folder (components, hooks, styles, tests, types). This approach promotes co-location and feature autonomy. Each feature becomes an independent module with its own responsibilities, which facilitates maintenance and allows teams to work in parallel without conflicts.
3What is the fundamental principle of Clean Architecture?
What is the fundamental principle of Clean Architecture?
Answer
Clean Architecture is based on the Dependency Rule: dependencies must always point inward, from outer layers (UI, infrastructure) to inner layers (domain, business logic). The business domain should never depend on UI or frameworks. This separation allows testing business logic independently, changing frameworks without rewriting business code, and maintaining a decoupled and scalable architecture.
What does the SOLID 'Single Responsibility' principle mean when applied to a React component?
What is dependency injection in React?
+19 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
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
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