Advanced Patterns Interview Questions
With Answers & Code Examples

Error Boundaries catch JavaScript errors during rendering, in lifecycle methods, and in constructors of child components. They must be class components (no hook equivalent yet).

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  // Render phase — update state to show fallback
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  // Commit phase — log error to monitoring service
  componentDidCatch(error, info) {
    logErrorToSentry(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? 
Something went wrong.
;
    }
    return this.props.children;
  }
}

// Usage — wrap features, not the entire app
function App() {
  return (
    }>
      }>
        
      
      
    
  );
}

// react-error-boundary library — hook-friendly wrapper
import { ErrorBoundary } from 'react-error-boundary';


  

Suspense lets components "wait" for something before rendering. The component throws a Promise; React catches it and shows the fallback.

// React.lazy — built-in Suspense integration
const Chart = lazy(() => import('./Chart'));

// React Query with Suspense mode
function UserProfile({ id }) {
  // This will suspend (throw) if data isn't ready yet
  const { data: user } = useSuspenseQuery({
    queryKey: ['user', id],
    queryFn: () => fetchUser(id),
  });

  return 
{user.name}
; // Only renders when data is ready
}

// Wrapping with Suspense
function Page() {
  return (
    }>
      
    
  );
}

// Nested Suspense — granular loading states
function Dashboard() {
  return (
    }>
      
      }>
          {/* loads independently */}
      
    
  );
}

// ✅ Legitimate use — forwarding unknown props to underlying element
function Button({ variant, className, ...rest }) {
  return (
    
  );
}

// ❌ Anti-pattern 1 — unknown DOM attributes cause React warnings
function Box({ color, ...rest }) {
  return 
; // if 'color' is in rest, "Unknown prop 'color'" warning
}

// ✅ Fix — destructure all custom props, only spread standard ones
function Box({ color, size, children, ...htmlProps }) {
  return 
{children}
;
}

// ❌ Anti-pattern 2 — spreading all parent props down
function Parent(props) {
  return ; // leaks parent-specific props to child
}

// ❌ Anti-pattern 3 — security risk with user-provided data
// If attackers control the props object, they could inject onClick etc.
const userConfig = JSON.parse(untrustedInput);
 // dangerous!