21 new react hooks snippets

README.md

@@ -4,47 +4,83 @@
 
 # React Hooks Snippets
 
-React Hooks Snippets is a [Visual Studio Code](https://code.visualstudio.com/) extension to make writing ReactJS [Hooks](https://react.dev/reference/react/hooks) easier and faster!
+![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/AlDuncanson.react-hooks-snippets)
+![Visual Studio Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/AlDuncanson.react-hooks-snippets)
+![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/AlDuncanson.react-hooks-snippets)
+![GitHub Repo stars](https://img.shields.io/github/stars/alDuncanson/react-hooks-snippets)
+![GitHub forks](https://img.shields.io/github/forks/alDuncanson/react-hooks-snippets)
 
+A [Visual Studio Code](https://code.visualstudio.com/) extension that adds snippet functionality for [React Hooks](https://react.dev/reference/react/hooks).
 
-## Supported Snippets
+> Now updated to support all of the new hooks introduced in [React v19](https://react.dev/blog/2024/12/05/react-19)!
 
+## Supported Hooks
+
+### State Hooks
 | Prefix  | Snippet |
 | ------------- | ------------- |
 | `ush` | `useState` |
-| `ueh` | `useEffect` |
+| `urdh` | `useReducer` |
+
+### Context Hooks
+| Prefix  | Snippet |
+| ------------- | ------------- |
 | `uch` | `useContext` |
-| `ucbh` | `useCallback` |
-| `umh` | `useMemo` |
-| `irh` | `import React` (and common hooks) |
+
+### Ref Hooks
+| Prefix  | Snippet |
+| ------------- | ------------- |
 | `urh` | `useRef` |
-| `urdh` | `useReducer` |
-| `irrh` | import react redux hooks |
-| `uss` | `useSelector` |
-| `usdf` | `useDispatch` |
-| `usd` | then use your `dispatch` |
+| `uihh` | `useImperativeHandle` |
 
+### Effect Hooks
+| Prefix  | Snippet |
+| ------------- | ------------- |
+| `ueh` | `useEffect` |
+| `uleh` | `useLayoutEffect` |
+| `uieh` | `useInsertionEffect` |
 
-## Add to your project
+### Performance Hooks
+| Prefix  | Snippet |
+| ------------- | ------------- |
+| `umh` | `useMemo` |
+| `ucbh` | `useCallback` |
+| `uth` | `useTransition` |
+| `udvh` | `useDeferredValue` |
 
-There are 2 ways you can add React Hooks Snippets to your project:
+### React Dom Hooks
+| Prefix  | Snippet |
+| ------------- | ------------- |
+| `ufsh` | `useFormStatus` |
 
-#### By command
-Launch VS Code Quick Open (`Ctrl+P`), paste `ext install AlDuncanson.react-hooks-snippets`, and press enter.
+### Other Hooks
+| Prefix  | Snippet |
+| ------------- | ------------- |
+| `udbvh` | `useDebugValue` |
+| `uidh` | `useId` |
+| `usesh` | `useSyncExternalStore` |
+| `uash` | `useActionState` |
+| `uoh` | `useOptimistic` |
 
-#### By the Extension Marketplace
-Launch VS Code Extension Marketplace (Ctrl+Shift+X), search for `React Hooks Snippets`, and look for my logo!
+## Install
 
+Add the React Hooks Snippets extension to VS Code using one of the following methods:
 
-## Contributing
+### By command
+Launch VS Code Quick Open (`Ctrl+P`), paste `ext install AlDuncanson.react-hooks-snippets`, and press enter.
 
-There are two ways to contribute:
+### By the Marketplace UI
+Launch VS Code Extension Marketplace UI (`Ctrl+Shift+X`), search for `React Hooks Snippets`, and look for my logo!
 
-#### Code
-Submit a pull request with your proposed fixes, changes, and/or improvements. All are welcome!
+### By the Marketplace website
+Visit the extension's [Visual Studio Marketplace page](https://marketplace.visualstudio.com/items?itemName=AlDuncanson.react-hooks-snippets) and click `Install`.
 
-#### Coffee
-<a href='https://www.buymeacoffee.com/alduncanson' target='_blank'><img src='https://cdn.buymeacoffee.com/buttons/default-orange.png' alt='Buy Me A Coffee' height='34' width='144'></a>
 
 ## License
 Usage is provided under the [MIT License](https://opensource.org/licenses/MIT). See [LICENSE.txt](https://github.com/alDuncanson/react-hooks-snippets/blob/master/LICENSE.txt) for the full details.
+
+## Support My Work
+
+If you like this extension, please consider supporting me by buying me a coffee!
+
+<a href='https://www.buymeacoffee.com/alduncanson' target='_blank'><img src='https://cdn.buymeacoffee.com/buttons/default-orange.png' alt='Buy Me A Coffee' height='34' width='144'></a>

package.json

@@ -2,7 +2,7 @@
 	"name": "react-hooks-snippets",
 	"displayName": "React Hooks Snippets",
 	"description": "Code snippets for React Hooks",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"icon": "icon.png",
 	"publisher": "AlDuncanson",
 	"repository": {

snippets/snippets.json

@@ -6,6 +6,38 @@
 		],
 		"description": "React useState() hook"
 	},
+	"useReducer": {
+		"prefix": "urdh",
+		"body": [
+			"const [${1:state},${2: dispatch}] = useReducer(${3:reducer}, ${4:initialArg}, ${5:init});"
+		],
+		"description": "React useReducer() hook"
+	},
+	"useContext": {
+		"prefix": "uch",
+		"body": [
+			"const $1 = useContext($2);$0"
+		],
+		"description": "React useContext() hook"
+	},
+	"useRef": {
+		"prefix": "urh",
+		"body": [
+			"const $1 = useRef($2);$0"
+		],
+		"description": "React useRef() hook"
+	},
+	"useImperativeHandle": {
+		"prefix": "uihh",
+		"body": [
+			"useImperativeHandle(ref, () => {",
+			"\treturn {",
+			"\t\t$1",
+			"\t}",
+			"}, [$2]);$0"
+		],
+		"description": "React useImperativeHandle() hook"
+	},
 	"useEffect": {
 		"prefix": "ueh",
 		"body": [
@@ -18,12 +50,30 @@
 		],
 		"description": "React useEffect() hook"
 	},
-	"useContext": {
-		"prefix": "uch",
+	"useLayoutEffect": {
+		"prefix": "uleh",
 		"body": [
-			"const $1 = useContext($2);$0"
+			"useLayoutEffect(() => {",
+			"\t$1",
+			"}, [${2}]);$0"
 		],
-		"description": "React useContext() hook"
+		"description": "React useLayoutEffect() hook"
+	},
+	"useInsertionEffect": {
+		"prefix": "uieh",
+		"body": [
+			"useInsertionEffect(() => {",
+			"\t$1",
+			"}, [${2}]);$0"
+		],
+		"description": "React useInsertionEffect() hook"
+	},
+	"useMemo": {
+		"prefix": "umh",
+		"body": [
+			"const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}]);$0"
+		],
+		"description": "React useMemo() hook"
 	},
 	"useCallback": {
 		"prefix": "ucbh",
@@ -37,55 +87,60 @@
 		],
 		"description": "React useCallback() hook"
 	},
-	"useMemo": {
-		"prefix": "umh",
+	"useTransition": {
+		"prefix": "uth",
 		"body": [
-			"const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}]);$0"
+			"const [isPending, startTransition] = useTransition();$0"
 		],
-		"description": "React useMemo() hook"
+		"description": "React useTransition() hook"
 	},
-	"import react hooks": {
-		"prefix": "irh",
+	"useDeferredValue": {
+		"prefix": "udvh",
 		"body": [
-			"import React, { useState, useContext, useEffect, useCallback, useMemo } from 'react';"
-		]
+			"const ${1:deferredValue} = useDeferredValue(${2:value});$0"
+		],
+		"description": "React useDeferredValue() hook"
 	},
-	"useRef": {
-		"prefix": "urh",
+	"useFormStatus": {
+		"prefix": "ufsh",
 		"body": [
-			"const $1 = useRef($2);$0"
+			"const { ${1:pending}, ${2:data}, ${3:method}, ${4:action} } = useFormStatus();$0"
 		],
-		"description": "React useRef() hook"
+		"description": "React Dom useFormStatus() hook"
 	},
-	"useReducer": {
-		"prefix": "urdh",
+	"useDebugValue": {
+		"prefix": "udbvh",
 		"body": [
-			"const [${1:state},${2: dispatch}] = useReducer(${3:reducer}, ${4:initialArg}, ${5:init});"
+			"useDebugValue(${1:value});$0"
 		],
-		"description": "React useReducer() hook"
+		"description": "React useDebugValue() hook"
 	},
-	"import react-redux hooks": {
-		"prefix": "irrh",
+	"useId": {
+		"prefix": "uidh",
 		"body": [
-			"import { useSelector, useDispatch } from 'react-redux';"
-		]
+			"const ${1:id} = useId();$0"
+		],
+		"description": "React useId() hook"
 	},
-	"useSelector": {
-		"prefix": "uss",
+	"useSyncExternalStore": {
+		"prefix": "usesh",
 		"body": [
-			"const $1 = useSelector(state => state.$1);"
-		]
+			"const ${1:snapshot} = useSyncExternalStore(${2:subscribe}, ${3:getSnapshot}, ${4:getServerSnapshot});$0"
+		],
+		"description": "React useSyncExternalStore() hook"
 	},
-	"useDispatchFunction": {
-		"prefix": "usdf",
+	"useActionState": {
+		"prefix": "uash",
 		"body": [
-			"const $1 = useDispatch($2);$3"
-		]
+			"const [${1:state}, ${2:formAction}, ${3:isPending}] = useActionState(${4:fn}, ${5:initialState});$0"
+		],
+		"description": "React useActionState() hook"
 	},
-	"useDispatch": {
-		"prefix": "usd",
+	"useOptimistic": {
+		"prefix": "uoh",
 		"body": [
-			"const $1 = $2 => dispatch($3);"
-		]
+			"const [${1:optimisticState}, ${2:addOptimistic}] = useOptimistic(${3:state}, ${4:updateFn});$0"
+		],
+		"description": "React useOptimistic() hook"
 	}
 }