Frontend

Shared Concepts Study Portal

Cross-cutting frontend patterns and practices
Flash Cards Practice
Frontend / Shared Concepts / O Open Closed Principle OCP / Quick recall Q&A

O Open Closed Principle OCP · Quick recall Q&A

2 min read
Mid-level3 min read
Rapid overview

Quick recall Q&A

Q: How do you ensure new features don't require modifying existing code in React? A: Use composition, custom hooks with dependency injection, and strategy patterns. Pass dependencies as props or via context so components depend on abstractions, not concrete implementations.
Q: What signals an OCP violation in frontend code? A: Large switch statements or if-else chains that grow with every new feature. For example, a form validator with a giant switch for field types, or a component that checks if (type === 'stripe') vs if (type === 'paypal') instead of using polymorphism.
const processor = useFeatureFlag('crypto-payments')
  ? new CryptoProcessor()
  : new StripeProcessor();
Q: How do feature flags interact with OCP? A: Feature flags can select between implementations without modifying code. Use dependency injection to register both implementations and toggle via configuration:
Q: How do you balance OCP with readability in frontend? A: Don't over-abstract. Only introduce interfaces when you have 2+ implementations or anticipate variation. A single validator doesn't need an interface until you add a second one.
Q: How does OCP apply to component libraries? A: Export component composition APIs that allow extension. For example, a <Table> component that accepts custom <Column> renderers allows users to add new column types without modifying the library.
Q: How does OCP apply to APIs consumed by frontend? A: Version APIs instead of changing contracts. Add new endpoints (/api/v2/users) or optional fields while keeping existing behavior untouched to avoid breaking frontend clients.
Q: What tooling helps enforce OCP in frontend? A: TypeScript interfaces enforce contracts, ESLint rules can warn on large switch statements, and architectural tests can verify dependencies. Code reviews should catch growing conditionals.
Q: How do React hooks aid OCP? A: Custom hooks encapsulate behavior behind interfaces. Create usePayment(processor: PaymentProcessor) instead of useStripePayment(). New processors extend via new implementations, not code changes.
interface Theme {
  colors: ColorPalette;
  spacing: SpacingScale;
}

function Button({ theme }: { theme: Theme }) {
  return <button style={{ color: theme.colors.primary }}>Click</button>;
}
Q: How does OCP help with component theming? A: Define theme interfaces and inject implementations:

Add new themes by implementing the interface without touching Button.

Q: Can configuration count as "extension" in frontend? A: Yes, if behavior is data-driven. For example, a form builder that reads field configurations from JSON—adding new field types is configuration, not code modification. Ensure validation guards config changes.
Q: How does OCP help with plugin architectures in frontend? A: Plugins implement known interfaces (e.g., Monaco editor extensions, VS Code extensions, WordPress blocks). The host application never changes; you register new plugins via a plugin API.
const store = createStore(
  reducer,
  applyMiddleware(logger, analytics, errorTracker, newMiddleware)
);
Q: How do you use OCP with state management (Redux)? A: Use middleware for cross-cutting concerns (logging, analytics, error tracking). Each middleware is independent and can be added without modifying existing middleware or reducers:
<DataTable
  columns={columns}
  renderRow={(row) => <CustomRow data={row} />} // Extend rendering
/>
Q: How does OCP apply to React component composition? A: Use render props, children as function, or slots pattern:

Users extend behavior by providing custom renderers without modifying DataTable.

See also