React Hooks Snippets
React Hooks Snippets gives you a shorthand snippet for every hook in the
React docs — in VS Code, VSCodium,
Cursor, Devin Desktop (formerly Windsurf), and Neovim. Type a short prefix,
press Tab, and get a fully formed hook call with tab stops on
everything you'd want to edit. It works in JavaScript, TypeScript, and JSX/TSX
files, and covers every current hook — including the newly stable
useEffectEvent — plus the use API and react-dom's useFormStatus.
Prefixes follow one simple pattern: u + the hook's initials + h. So ush
is useState hook, ueh is useEffect hook, and ucbh
is useCallback hook:
ush⇥ → const [count, setCount] = useState(0);
Install
Visual Studio Marketplace
For VS Code, install from the
Visual Studio Marketplace.
New to extensions? See the
official VS Code docs.
Open VSX
For VSCodium, Cursor, Devin Desktop (formerly Windsurf), Gitpod, and other
compatible editors, install from
Open VSX.
Neovim
This repo doubles as a
LuaSnip snippet source, no port
needed. Add it with your plugin manager and load VS Code-format snippets:
-- lazy.nvim
{ "alDuncanson/react-hooks-snippets" },
require("luasnip.loaders.from_vscode").lazy_load()
Snippets surface through your completion engine
(blink.cmp,
nvim-cmp) or a LuaSnip expand keymap.
Snippets
State
| Prefix |
Hook |
Expands to |
ush |
useState |
const [state, setState] = useState(initialState) |
urdh |
useReducer |
const [state, dispatch] = useReducer(reducer, initialArg, init) |
Context
| Prefix |
Hook |
Expands to |
uch |
useContext |
const value = useContext(SomeContext) |
Refs
| Prefix |
Hook |
Expands to |
urh |
useRef |
const ref = useRef(initialValue) |
uihh |
useImperativeHandle |
useImperativeHandle(ref, () => ({ … }), [deps]) |
Effects
| Prefix |
Hook |
Expands to |
umh |
useMemo |
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]) |
ucbh |
useCallback |
const memoizedCallback = useCallback(() => { … }, [a, b]) |
uth |
useTransition |
const [isPending, startTransition] = useTransition() |
udvh |
useDeferredValue |
const deferredValue = useDeferredValue(value) |
Everything else
| Prefix |
Hook |
Expands to |
uash |
useActionState |
const [state, formAction, isPending] = useActionState(fn, initialState) |
uoh |
useOptimistic |
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn) |
usesh |
useSyncExternalStore |
const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) |
uidh |
useId |
const id = useId() |
udbvh |
useDebugValue |
useDebugValue(value) |
uuh |
use |
const value = use(resource) |
ufsh |
useFormStatus |
const { pending, data, method, action } = useFormStatus() |
Contributing
Spotted a hook we're missing or a snippet that could be better? Issues and
pull requests are welcome.
