TypeScript Academy · Lesson

Typing useRef and Event Handlers

Handle DOM refs and synthetic events safely.

Lesson 3 of 413 steps

Typing useRef and Event Handlers is a free TypeScript Academy lesson on CoddyKit. This is lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The TypeScript Academy course includes 4 lessons in total.

Welcome

This lesson covers Typing Useref And Event Handlers in TypeScript with React.

Component Props Interface

Define a props interface for React components to document and enforce the component API.

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

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

FC vs Explicit Return Type

React.FC adds children and other types automatically. Explicit return type (JSX.Element | null) is often clearer.

const Card: React.FC<{title: string}> = ({ title }) => <div>{title}</div>;

// Or explicit:
function Card2({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

Typing useState

useState infers the type from the initial value. Provide a type parameter when the initial value is null or ambiguous.

const [count, setCount] = useState(0);           // number
const [name, setName] = useState('');            // string
const [user, setUser] = useState<User | null>(null); // explicit

Typing useReducer

useReducer works best with a discriminated union action type.

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; value: number };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return action.value;
  }
}

Typing useRef for DOM

useRef for DOM elements needs a type argument. Initialize with null since the element does not exist yet.

const inputRef = useRef<HTMLInputElement>(null);

// Use:
if (inputRef.current) {
  inputRef.current.focus();
}

Typing Event Handlers

React event types include React.ChangeEvent, React.MouseEvent, and React.FormEvent.

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
}

Generic Components

Generic components accept a type parameter for flexible, type-safe lists and selects.

function List<T extends { id: number }>({ items }: { items: T[] }) {
  return <ul>{items.map(i => <li key={i.id}>{JSON.stringify(i)}</li>)}</ul>;
}

forwardRef with TypeScript

forwardRef needs type parameters for both the ref element type and props.

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

Custom Hooks Return Types

Type custom hook return values explicitly to avoid any[] inference for tuple returns.

function useToggle(init: boolean): [boolean, () => void] {
  const [state, setState] = useState(init);
  return [state, () => setState(s => !s)];
}

Context with TypeScript

Type React context with a union that includes undefined to force consumers to check for the context.

const AuthContext = React.createContext<User | undefined>(undefined);
function useAuth(): User {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Quick Check

What is the correct type for a ref to an HTML input element?

Answer it in the interactive lesson

Recap

Type React props with interfaces, useState with type parameters, events with React event types, refs with DOM element generics, and forwardRef with dual type parameters. Generic components enable type-safe reusable UI.

Free to start

Learn TypeScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 101
Lessons: 352

Start learning free View the full course

Frequently Asked Questions

Is the “Typing useRef and Event Handlers” lesson free?

Yes — the full text of “Typing useRef and Event Handlers” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO. The TypeScript Academy course includes 4 lessons in total.

What will I learn in “Typing useRef and Event Handlers”?

Handle DOM refs and synthetic events safely. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

How long does the “Typing useRef and Event Handlers” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy