Expert Patterns

Preview — 3 of 10 questions

How do you properly type the as prop?

javascript

// Type-safe polymorphic component:
type PolymorphicProps<T extends React.ElementType, P = {}> = P & {
  as?: T;
} & Omit<React.ComponentPropsWithoutRef<T>, keyof P | "as">;

function Text<T extends React.ElementType = "p">({
  as,
  children,
  className,
  ...props
}: PolymorphicProps<T, { className?: string }>) {
  const Component = as ?? "p";
  return (
    <Component className={className} {...props}>
      {children}
    </Component>
  );
}

// Usage — TypeScript infers valid props:
<Text as="a" href="/about">Link</Text>        // ✅ href is valid for <a>
<Text as="button" onClick={fn}>Button</Text>  // ✅ onClick is valid for <button>
<Text as="p" href="/about">Paragraph</Text>   // ❌ TypeScript error: href not valid for <p>

AThe as prop type is always string — TypeScript can't constrain it

BReact.ComponentPropsWithoutRef<T> only types native HTML elements, not custom components

CUsing generics constrained to React.ElementType, TypeScript infers the correct prop set for each as value — href is valid for as="a", onClick is always valid, invalid props for the given element are caught at compile time

DThis pattern requires runtime type checking — TypeScript generics don't work at runtime

What makes React Aria different from simpler headless approaches?

javascript

import { useButton, useDialog, FocusScope, useOverlay, usePreventScroll } from "react-aria";

function Modal({ isOpen, onClose, title, children }) {
  const overlayRef = useRef(null);
  const { overlayProps } = useOverlay({ isOpen, onClose, isDismissable: true }, overlayRef);
  const { dialogProps, titleProps } = useDialog({}, overlayRef);

  usePreventScroll({ isDisabled: !isOpen });

  if (!isOpen) return null;

  return (
    <div className="overlay">
      <FocusScope contain restoreFocus autoFocus>
        <div {...overlayProps} {...dialogProps} ref={overlayRef}>
          <h2 {...titleProps}>{title}</h2>
          {children}
          <Button onPress={onClose}>Close</Button>
        </div>
      </FocusScope>
    </div>
  );
}

AReact Aria provides complete ARIA specification compliance (keyboard navigation, screen reader announcements, focus management, mobile touch) — it handles platform differences and edge cases that most manual implementations miss

BReact Aria is only needed for government/enterprise applications

CReact Aria automatically applies styles to components

DFocusScope is a browser built-in — React Aria just exposes it

How do you safely integrate RxJS observables?

javascript

function useObservable<T>(observable: Observable<T>, initialValue: T): T {
  const [value, setValue] = useState<T>(initialValue);

  useEffect(() => {
    const subscription = observable.subscribe({
      next: (v) => setValue(v),
      error: (err) => console.error(err), // handle errors
    });
    return () => subscription.unsubscribe(); // cleanup!
  }, [observable]);

  return value;
}

// Usage:
function LiveStockPrice({ symbol }) {
  const price$ = useMemo(
    () => createStockPriceStream(symbol),
    [symbol]
  );
  const price = useObservable(price$, 0);
  return <span>{price}</span>;
}

ARxJS observables cannot be used in React components

BObservable subscriptions never need cleanup — they auto-unsubscribe

CYou must use BehaviorSubject specifically — regular observables don't work

DObservables integrate with React via useEffect subscription + cleanup; the observable is memoized to prevent re-subscriptions; useSyncExternalStore is a more concurrent-safe alternative

Answer all 10 questions (7 more), see explanations for every answer, and track your score.