React Hooks Snippets installs statistics

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 <kbd>Tab</kbd>, 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
ueh	useEffect	useEffect(() => { … return () => { … } }, [deps])
uleh	useLayoutEffect	useLayoutEffect(() => { … }, [deps])
uieh	useInsertionEffect	useInsertionEffect(() => { … }, [deps])
ueeh	useEffectEvent	const onEvent = useEffectEvent(() => { … })

Performance

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…