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 |
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.
