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" },

Or, on Nix, consume the flake and add the package to your plugin list:

# flake input
inputs.react-hooks-snippets.url = "github:alDuncanson/react-hooks-snippets";

# then wherever you declare Neovim plugins
inputs.react-hooks-snippets.packages.${pkgs.system}.default

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

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.