I Built a VS Code Extension, I would like your feedback!

abdvlla — Wed, 05 Aug 2026 02:16:10 +0000

Welcome to my first post!

If you write React and TypeScript regularly, you probably already know the feeling: you know how to write a useState + useEffect data fetch, you've done it a hundred times, but that doesn't make typing it out the hundred-and-first time any less annoying. So you either retype the same boilerplate by hand again, or dig through an old project to copy-paste it, or lose a minute to Stack Overflow just to copy paste or check a detail like isLoading vs. isPending. None of that is hard. It's just unnecessary effort that adds up over a day of writing code you already know how to write.

That issue is what led me to build RapidReact, a VS Code extension that turns common React/TypeScript patterns into short, typed snippets.

🔗 Install RapidReact · View on GitHub

The idea

Instead of hand-writing (or copy-pasting from an old project) the same boilerplate every time, you type a short prefix and get a complete, typed starting point.

For example, typing:

rr.tq.querypage

expands into a full page component wired up with TanStack Query, imports, useQuery, loading/error states, and a return block ready for your JSX.

Preview:

What it covers

RapidReact isn't just generic React snippets, it's built around the stuff that's actually easy to blank on mid-task:

Core React patterns, useState, useEffect, typed props, list rendering, forms
React Hook Form + Zod, the zodResolver wiring between the two is one of the most-Googled parts of using either library
Axios, request helpers, a configured instance, interceptors
TanStack Query, useQuery/useMutation with the correct current API (isPending, not the deprecated isLoading)
Everyday utilities, debounce, clipboard copy, a typed localStorage wrapper, safe JSON parsing, and more

Every snippet is TypeScript-first, since "correct types" is usually half the reason I'm looking something up in the first place.

Try it

Install RapidReact from the VS Code Marketplace, open a .tsx or .ts file, and start typing any of these:

- rr.state
- rr.formpage
- rr.usefetch
- rr.axios.get
- rr.tq.query

Full snippet list and docs are in the GitHub repo — link in the Marketplace listing.

Why I'm sharing this