How do you type React components with TypeScript?

The main design decision is where to put type annotations. Public props deserve an explicit type because they are the component's contract. Local state, derived values and inline event handlers are usually inferred. Generic components are useful for reusable lists and inputs where the item type should flow through.

import type { ReactNode } from "react";

type ButtonProps = {
  label: string;
  onClick: () => void;
  children?: ReactNode;
};

function Button({ label, onClick, children }: ButtonProps) {
  return (
    <button onClick={onClick}>
      {label}
      {children}
    </button>
  );
}

Patterns worth knowing

• Use ReactNode for children rather than JSX.Element
• Use ComponentProps<"button"> to extend native element props
• Type useState explicitly only when the initial value is too narrow
• Type event handlers with ChangeEvent or MouseEvent when extracted
• Use a generic component when the item type must flow into callbacks

Avoid typing children as JSX.Element. A component can receive strings, numbers, arrays, null or fragments, and ReactNode covers those cases. For DOM wrappers, extending ComponentProps keeps the native attributes and event types without re-declaring them.