Frontend Beauty
ESC

Type to search the knowledge base.

React with TypeScript Props

Typing React props in TypeScript: interfaces, children, events, discriminated unions, and component props helpers.

beginner3 min read
  • react
  • react-with

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.”

Further reading

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