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

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:

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.

Description from the VS Code Marketplace listing.