React with TypeScript Props

TypeScript earns its keep on React props: autocomplete, refactors, and catching wrong event shapes. Prefer explicit props types over any.

Docs: React TypeScript Cheatsheet, Typing props.

Basic props

type ButtonProps = {
  label: string;
  onClick: () => void;
  disabled?: boolean;
};

function Button({ label, onClick, disabled = false }: ButtonProps) {
  return (
    <button type="button" onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

children and nodes

import type { ReactNode } from 'react';

type CardProps = {
  title: string;
  children: ReactNode;
};

Use ReactElement only when you need an element specifically; ReactNode covers text, null, arrays.

Events

function Search() {
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    console.log(e.target.value);
  }
  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
  }
  return (
    <form onSubmit={onSubmit}>
      <input onChange={onChange} />
    </form>
  );
}

Discriminated unions for variants

type AlertProps =
  | { kind: 'error'; error: Error; onRetry: () => void }
  | { kind: 'success'; message: string };

function Alert(props: AlertProps) {
  if (props.kind === 'error') {
    return <button onClick={props.onRetry}>{props.error.message}</button>;
  }
  return <p>{props.message}</p>;
}

Useful utilities

type Props = React.ComponentProps<'button'>; // native button props
type FancyProps = React.ComponentProps<typeof Button>;

ComponentPropsWithoutRef / WithRef help when wrapping DOM elements (forwarding refs).

Avoid

• props: any
• JSX.Element everywhere when ReactNode is correct
• Optional callbacks that are actually required for the variant — use unions

Interview out-loud

“I type props with explicit types or interfaces, ReactNode for children, and specific event types for handlers. Discriminated unions model variants safely. ComponentProps helps wrap native elements without re-declaring the whole attribute set.”

Related on this site

• Function Components
• Forwarding Refs
• Forms in React
• Children Prop Patterns

Further reading

• TypeScript — react.dev
• React TypeScript Cheatsheet
• JSX — TypeScript Handbook

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides

• useCopyToClipboard HookCopy text with navigator.clipboard, fallback execCommand, transient copied state, and permissions that fail in insecure contexts.
• useDebouncedValue HookDebounce a changing value in React without firing effects on every keystroke. Cleanup, leading vs trailing, and the stale timer that updates unmounted state.
• useEventListener HookAttach a window, document, or element listener with a stable handler ref so you do not rebind on every render. Capture option and target changes.
• useFetch With AbortControllerFetch in an effect with a signal, ignore aborted errors, and prevent the slow response from winning a race after the url changes.
• useIdle HookDetect idle users: reset a timer on input events, fire idle after timeout, and decide whether mount starts the timer immediately.