Staff-Level Frontend Developer Interview Preparation Guide for Spotify

// Child.js
import React from "react";
const Child = ({ value, onClick }) => {
  console.log("Child render");
  return <button onClick={onClick}>{value}</button>;
};
export default React.memo(Child);

// Parent.js
const Parent = () => {
  const [count, setCount] = useState(0);
  const handler = useCallback(() => {}, []); // stable function
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Inc parent</button>
      <Child value={count} onClick={handler} />
    </>
  );
};

import React, { ElementType, forwardRef } from "react";

type Variant = "primary" | "secondary" | "ghost";
type Size = "sm" | "md" | "lg";

type PolymorphicProps<E extends ElementType> = {
  as?: E;
  variant?: Variant;
  size?: Size;
  disabled?: boolean;
  children?: React.ReactNode;
  ariaLabel?: string;
} & Omit<React.ComponentPropsWithoutRef<E>, "as" | "children" | "disabled">;

const Button = forwardRef(
  <E extends ElementType = "button">(
    { as, variant = "primary", size = "md", disabled = false, ariaLabel, children, ...rest }: PolymorphicProps<E>,
    ref: React.Ref<any>
  ) => {
    const Component = (as || "button") as ElementType;
    const isButton = Component === "button";
    const roleProps = isButton
      ? {}
      : { role: "button", tabIndex: disabled ? -1 : 0, "aria-pressed": undefined };

    return (
      <Component
        ref={ref}
        // ensure HTML disabled only applied to native button/input
        {...(isButton ? { disabled } : {})}
        aria-disabled={!isButton ? disabled || undefined : undefined}
        aria-label={ariaLabel}
        onClick={(e: any) => {
          if (disabled) {
            e.preventDefault();
            e.stopPropagation();
            return;
          }
          (rest as any).onClick?.(e);
        }}
        onKeyDown={(e: React.KeyboardEvent) => {
          if (!isButton && !disabled && (e.key === "Enter" || e.key === " ")) {
            (rest as any).onClick?.(e);
          }
        }}
        {...roleProps}
        {...rest}
        className={`btn ${variant} ${size} ${disabled ? "disabled" : ""}`}
      >
        {children}
      </Component>
    );
  }
);

export default Button;

// BAD: server and client produce different timestamps
    const ts = Date.now();
    return <div>{ts}</div>;

const id = 'id-' + Math.random(); // different on server vs client

import React, {createContext, useContext, useMemo, useState, useRef} from "react";

type TabId = string;
type Context = {
  active: TabId | null;
  setActive: (id: TabId) => void;
  registerTab: (id: TabId, ref: HTMLElement | null) => void;
  tabsOrder: TabId[];
};
const TabsContext = createContext<Context | null>(null);

export function Tabs({children, defaultValue, value, onChange}: {
  children: React.ReactNode; defaultValue?: TabId; value?: TabId; onChange?: (id: TabId)=>void
}) {
  const [activeInternal, setActiveInternal] = useState<TabId | null>(defaultValue ?? null);
  const active = value ?? activeInternal;
  const tabsOrderRef = useRef<TabId[]>([]);
  const tabsRefs = useRef<Record<TabId, HTMLElement | null>>({});

  const registerTab = (id: TabId, ref: HTMLElement | null) => {
    if (!tabsOrderRef.current.includes(id)) tabsOrderRef.current.push(id);
    tabsRefs.current[id] = ref;
  };
  const setActive = (id: TabId) => {
    if (value === undefined) setActiveInternal(id);
    onChange?.(id);
  };

  const ctx = useMemo(()=>({
    active,
    setActive,
    registerTab,
    tabsOrder: tabsOrderRef.current
  }), [active]);

  return <TabsContext.Provider value={ctx}>{children}</TabsContext.Provider>;
}

function useTabs(){ const c = useContext(TabsContext); if(!c) throw new Error("Must be inside Tabs"); return c; }

export const List: React.FC<{children: React.ReactNode}> = ({children}) => <div role="tablist" aria-orientation="horizontal">{children}</div>;

export const Tab: React.FC<{id: TabId; children: React.ReactNode}> = ({id, children})=>{
  const {active, setActive, registerTab, tabsOrder} = useTabs();
  const ref = useRef<HTMLButtonElement | null>(null);
  React.useEffect(()=> registerTab(id, ref.current), [id]);
  const idx = tabsOrder.indexOf(id);
  const onKeyDown = (e: React.KeyboardEvent)=>{
    if(e.key === "ArrowRight" || e.key === "ArrowLeft"){
      const dir = e.key === "ArrowRight" ? 1 : -1;
      const n = tabsOrder.length;
      const next = tabsOrder[(idx + dir + n) % n];
      const el = (tabsOrder.includes(next) && (document.querySelector(`[data-tab-id="${next}"]`) as HTMLElement)) ;
      el?.focus();
      setActive(next);
    }
  };
  return <button
    ref={ref}
    role="tab"
    aria-selected={active === id}
    data-tab-id={id}
    onClick={()=> setActive(id)}
    onKeyDown={onKeyDown}
    tabIndex={active===id?0:-1}
  >{children}</button>;
};

export const Panel: React.FC<{forId: TabId; children: React.ReactNode}> = ({forId, children})=>{
  const {active} = useTabs();
  return <div role="tabpanel" hidden={active !== forId} aria-labelledby={forId}>{active===forId?children:null}</div>;
};

// Export as compound
export const TabsCompound = Object.assign(Tabs, { List, Tab, Panel });