React & Next.js TypeScript Snippets

VS Code snippets for React TypeScript and Next.js App Router — ES6 style, no import React, typed Props interfaces, and auto-capitalized component names from your filename.

Installation

Search React Next.js TypeScript Snippets in the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X) and click Install.

Or install manually via Extensions → ... → Install from VSIX.

Features

Component and function names automatically derived from the filename (handles kebab-case, snake_case, camelCase, PascalCase)
All snippets use ES6 arrow functions with TypeScript interfaces
Covers all React hooks (React 18+) and React 19 APIs
Full Next.js 15+ App Router support (async params, cookies, headers)
TypeScript utility function snippets for both exported and inline use
Inline hook snippets — type useState, useEffect, etc. to insert just the hook call inside an existing component

React Snippets

Prefix	Description	Requires
`rfc`	Functional component with Props interface	React 18+
`rfcm`	Memoized component (`memo`)	React 18+
`rstate`	Component with `useState`	React 18+
`rreducer`	Component with `useReducer` + State/Action types	React 18+
`rref`	Component with `useRef`	React 18+
`reffect`	Component with `useEffect` + cleanup	React 18+
`rmemo`	Component with `useMemo`	React 18+
`rcallback`	Component with `useCallback`	React 18+
`rlayout`	Component with `useLayoutEffect` + cleanup	React 18+
`rid`	Component with `useId` (accessible label/input pair)	React 18+
`rtrans`	Component with `useTransition`	React 18+
`rdefer`	Component with `useDeferredValue`	React 18+
`rfstate`	Form with `useFormState` + `useFormStatus`	React 18+
`rfstatus`	Submit button using `useFormStatus`	React 18.3+
`raction`	Form with `useActionState`	React 19+
`roptim`	Optimistic UI with `useOptimistic`	React 19+
`ruse`	`use()` to read a Promise (wrap parent in Suspense)	React 19+
`rrefp`	Component accepting `ref` as a direct prop	React 19+
`rhook`	Custom hook with `useState` + `useEffect`	React 18+
`rctx`	Context + Provider + consumer hook	React 18+
`rfwd`	Component with `forwardRef`	React 18
`rlazy`	`React.lazy` + `Suspense` for code splitting	React 18+
`reb`	Error Boundary class component	React 18+
`rportal`	`createPortal` component	React 18+
`rfcg`	Generic component with type parameter `<T>`	React 18+

Example — `rfc`

interface UserCardProps {
  // props
}

const UserCard = ({ }: UserCardProps) => {
  return (
    <div className="">
      <h1>UserCard</h1>
    </div>
  );
};

export default UserCard;

TypeScript Function Snippets

TypeScript types

Prefix	Description
`ttype`	Type union
`tiface`	Interface

Inside a component

Prefix	Description
`cf`	Const arrow function — no params
`cfp`	Const arrow function — with inline params
`acf`	Async const arrow function — no params
`acfp`	Async const arrow function — with inline params

Exported functions

Prefix	Description
`fn`	Exported function — no params, name from filename
`fnp`	Exported function — with exported params type, name from filename
`fnx`	Exported function — with exported params type, manual name
`afn`	Exported async function — no params, name from filename
`afnp`	Exported async function — with exported params type, name from filename
`afnx`	Exported async function — with exported params type, manual name

Example — `fnp` (in `get-user.ts`)

export type GetUserParams = {

};

export const getUser = ({ }: GetUserParams) => {

};

Inline Hook Snippets

Type the hook name directly inside an existing component to insert just the hook call.

React Hooks

Prefix	Output
`ustate`	`const [state, setState] = useState<T>()`
`ueffect`	`useEffect` block with cleanup + deps array
`ucallback`	`useCallback` block with deps array
`umemo`	`useMemo` block with deps array
`ureducer`	`const [state, dispatch] = useReducer(reducer, initialState)`
`uref`	`const ref = useRef<HTMLDivElement>(null)`
`uctx`	`const value = useContext(MyContext)`
`uid`	`const id = useId()`
`utrans`	`const [isPending, startTransition] = useTransition()`
`udefer`	`const deferredValue = useDeferredValue(value)`
`ulayout`	`useLayoutEffect` block with cleanup + deps array
`uaction`	`const [state, formAction, isPending] = useActionState(...)` — React 19+
`uoptim`	`const [optimisticItems, addOptimisticItems] = useOptimistic(...)` — React 19+
`ufstatus`	`const { pending } = useFormStatus()` — React 18.3+
`ufstate`	`const [state, formAction] = useFormState(...)` — React 18

Next.js Hooks

Prefix	Output
`unrouter`	`const router = useRouter()`
`unpath`	`const pathname = usePathname()`
`unsearch`	`const searchParams = useSearchParams()`
`unparams`	`const params = useParams<T>()`

Next.js Snippets

Prefix	Description	Requires
`nsc`	Async Server Component	Next.js 15+
`ncc`	Client Component (`'use client'`)	Next.js 15+
`npage`	`page.tsx` with async params + searchParams	Next.js 15+
`nlay`	`layout.tsx` with typed `Metadata` and `ReactNode`	Next.js 15+
`nload`	`loading.tsx`	Next.js 15+
`nerr`	`error.tsx` (`'use client'`, `useEffect`)	Next.js 15+
`nnf`	`not-found.tsx`	Next.js 15+
`nforb`	`forbidden.tsx`	Next.js 15+
`nunauth`	`unauthorized.tsx`	Next.js 15+
`nroute`	`route.ts` with GET + POST handlers	Next.js 15+
`nrouted`	Dynamic `route.ts` with async params	Next.js 15+
`ncook`	Component using `await cookies()`	Next.js 15+
`nhead`	Component using `await headers()`	Next.js 15+
`nrouter`	Component with `useRouter`	Next.js 15+
`npath`	Component with `usePathname` + `useSearchParams`	Next.js 15+
`nparams`	Component with `useParams<T>`	Next.js 15+
`naction`	Server Action (`'use server'`)	Next.js 15+
`nmeta`	Dynamic `generateMetadata` with async params	Next.js 15+
`nafter`	`after()` for post-response work	Next.js 15+
`nauthc`	Auth guard using `forbidden()` + `unauthorized()`	Next.js 15+
`nform`	`next/form` with prefetching + progressive enhancement	Next.js 15+
`ncache`	`'use cache'` + `cacheLife` + `cacheTag`	Next.js 15 (experimental) / 16+
`nproxy`	`proxy.ts` — replaces deprecated `middleware.ts`	Next.js 16+
`nmw`	`middleware.ts`	Next.js 15
`nimg`	`next/image` component (inline)	Next.js 15+
`nrpath`	`revalidatePath()` call (inline)	Next.js 15+
`nrtag`	`revalidateTag()` call (inline)	Next.js 15+

Example — `npage` (in `app/blog/[slug]/page.tsx`)

interface PageProps {
  params: Promise<{ slug: string }>;
  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
}

const Page = async ({ params, searchParams }: PageProps) => {
  const { slug } = await params;

  return (
    <div className="">
      <h1>{slug}</h1>
    </div>
  );
};

export default Page;

Requirements

VS Code or any VS Code-based editor
.ts or .tsx files

Compatible Editors

Works in any editor built on VS Code:

License

MIT

React Next.js TypeScript Snippets

Sharif Rashed