#typescript

Reactadvanced

useReducer with a discriminated-union action type

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string[] }
  | { status: "error"; error: string };

Model a fetch state machine as a discriminated union so an exhaustiveness check fails to compile the moment a reducer case is missing.

Reactadvanced

useImperativeHandle to expose an imperative API via ref

import { useRef, useImperativeHandle, type Ref } from "react";

export type VideoHandle = { play: () => void; pause: () => void; seekTo: (seconds: number) => void };

export const VideoPlayer = ({ src, ref }: { src: string; ref?: Ref<VideoHandle> }) => {

Expose a small, deliberate imperative API (play, pause, seekTo) from a component, instead of leaking raw DOM nodes through a ref.

Reactintermediate

React.memo with a custom comparator for deep-equal props

import { memo } from "react";

type Props = { user: { id: string; name: string; tags: string[] } };

const isEqual = (prev: Props, next: Props) =>

Skip re-renders when props are structurally equal but not referentially equal, using memo second argument instead of a deep-equal library.