React Hooks Snippets

React Hooks Snippets gives you a shorthand snippet for every hook in the React docs — in VS Code, VSCodium, 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

VS Code — install from the Visual Studio Marketplace. New to extensions? See the official VS Code docs.

VSCodium, Gitpod & other Open VSX editors — grab the .vsix from the latest release and run codium --install-extension react-hooks-snippets-<version>.vsix. (An Open VSX listing is on the way.)

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

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.