React + TypeScript

// Preferred: explicit return type
interface Props {
  name: string;
  count?: number;       // optional
  onClick: () => void;
  children?: React.ReactNode;
}

function MyComp({ name, count = 0, onClick }: Props): JSX.Element {
  return <div onClick={onClick}>{name}: {count}</div>;
}

// React.FC (adds children implicitly in older TS)
const MyComp: React.FC<Props> = ({ name }) => <div>{name}</div>;

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyExtractor: (item: T) => string;
}

function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
  return (
    <ul>
      {items.map(item => (
        <li key={keyExtractor(item)}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

const Input = React.forwardRef<
  HTMLInputElement,
  React.InputHTMLAttributes<HTMLInputElement>
>((props, ref) => (
  <input {...props} ref={ref} />
));

Input.displayName = 'Input';

// useImperativeHandle
React.useImperativeHandle(ref, () => ({
  focus: () => inputRef.current?.focus()
}));

// Typed children
children: React.ReactNode   // most permissive
children: React.ReactElement // single element
children: JSX.Element        // single JSX
children: string             // text only

// Render prop
interface P {
  render: (val: string) => React.ReactNode;
}
const x = ({ render }: P) => render('hello');

// Children as function
children: (val: number) => React.ReactNode;

// Extend HTML element props
interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'ghost';
}

function Button({ variant = 'primary', ...rest }: ButtonProps) {
  return <button className={variant} {...rest} />;
}

// Polymorphic 'as' prop (simplified)
type AsProp<C extends React.ElementType> = {
  as?: C;
};

class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    return this.state.hasError
      ? <h2>Error!</h2> : this.props.children;
  }
}

const TabContext = createContext<{ active: string }>({ active: '' });

function Tabs({ children, defaultTab }: TabsProps) {
  const [active, setActive] = useState(defaultTab);
  return <TabContext.Provider value={{ active }}>{children}</...>;
}

Tabs.Tab = function Tab({ id, children }: ...) {
  const { active } = useContext(TabContext);
  return <div aria-selected={active === id}>{children}</div>;
};

// Usage: <Tabs><Tabs.Tab id="a">A</Tabs.Tab></Tabs>

function withAuth<P extends object>(
  Component: React.ComponentType<P>
) {
  return function WithAuth(props: P) {
    const { isAuthed } = useAuth();
    if (!isAuthed) return <Redirect to="/login" />;
    return <Component {...props} />;
  };
}

const ProtectedPage = withAuth(Dashboard);
// ProtectedPage.displayName = 'withAuth(Dashboard)'

// Controlled (React owns value)
const [val, setVal] = useState('');
<input value={val} onChange={e => setVal(e.target.value)} />

// Uncontrolled (DOM owns value)
const ref = useRef<HTMLInputElement>(null);
<input defaultValue="initial" ref={ref} />;
ref.current?.value; // read on demand

// Controlled component pattern
interface P { value: string; onChange(v: string): void; }

// Parent owns shared state
function Parent() {
  const [shared, setShared] = useState('');
  return (
    <>
      <ChildA value={shared} onChange={setShared} />
      <ChildB value={shared} />
    </>
  );
}

// Both children stay in sync
// ChildA writes, ChildB reads

// Portal (render outside DOM hierarchy)
import { createPortal } from 'react-dom';
createPortal(<Modal />, document.getElementById('modal-root')!);

// Suspense + lazy
const Dashboard = React.lazy(() => import('./Dashboard'));

<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>

type Status = 'idle' | 'loading' | 'success' | 'error';

const [status, setStatus] = useState<Status>('idle');

// Discriminated union state
type State =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: Data }
  | { status: 'error'; error: Error };
// Narrows automatically in if/switch

// Skip re-render if props unchanged
const ExpensiveChild = React.memo(
  function Child({ data }: { data: Data }) {
    return <div>{data.value}</div>;
  }
);

// Custom comparator
React.memo(Child, (prev, next) =>
  prev.id === next.id
);

// ⚠ Only helps if parent re-renders often
// ⚠ Inline objects/fns bypass memo!

// Stable fn reference across renders
const handleClick = useCallback(
  (id: string) => { deleteItem(id); },
  [deleteItem] // deps
);

// Pair with React.memo to prevent child re-render
const fetchPage = useCallback(
  async (page: number) => {
    const data = await api(page);
    setItems(data);
  },
  [] // api is stable
);

// Memoize expensive computation
const sorted = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// Stable object reference (stops child re-render)
const config = useMemo(
  () => ({ timeout: 3000, retries }),
  [retries]
);

// ⚠ Don't overuse — has its own cost
// Use when: expensive calc OR stable ref needed

// Key tells React element identity
items.map(item => <Row key={item.id} />); // ✅
items.map((item, i) => <Row key={i} />);  // ⚠ avoid

// Force re-mount with key change
<Form key={userId} /> // new key = fresh mount

// Fragment shorthand
<>...</>  // no DOM node
<React.Fragment key={id}>...</React.Fragment> // keyed

// React 18: automatic batching everywhere
setTimeout(() => {
  setA(1); setB(2); // single re-render in React 18
}, 0);

// Opt-out of batching
import { flushSync } from 'react-dom';
flushSync(() => setState(x));

// useTransition: mark low-priority update
const [isPending, startTransition] = useTransition();
startTransition(() => setFilter(val)); // deferrable