|
6 | 6 | ], |
7 | 7 | "description": "React useState() hook" |
8 | 8 | }, |
| 9 | + "useReducer": { |
| 10 | + "prefix": "urdh", |
| 11 | + "body": [ |
| 12 | + "const [${1:state},${2: dispatch}] = useReducer(${3:reducer}, ${4:initialArg}, ${5:init});" |
| 13 | + ], |
| 14 | + "description": "React useReducer() hook" |
| 15 | + }, |
| 16 | + "useContext": { |
| 17 | + "prefix": "uch", |
| 18 | + "body": [ |
| 19 | + "const $1 = useContext($2);$0" |
| 20 | + ], |
| 21 | + "description": "React useContext() hook" |
| 22 | + }, |
| 23 | + "useRef": { |
| 24 | + "prefix": "urh", |
| 25 | + "body": [ |
| 26 | + "const $1 = useRef($2);$0" |
| 27 | + ], |
| 28 | + "description": "React useRef() hook" |
| 29 | + }, |
| 30 | + "useImperativeHandle": { |
| 31 | + "prefix": "uihh", |
| 32 | + "body": [ |
| 33 | + "useImperativeHandle(ref, () => {", |
| 34 | + "\treturn {", |
| 35 | + "\t\t$1", |
| 36 | + "\t}", |
| 37 | + "}, [$2]);$0" |
| 38 | + ], |
| 39 | + "description": "React useImperativeHandle() hook" |
| 40 | + }, |
9 | 41 | "useEffect": { |
10 | 42 | "prefix": "ueh", |
11 | 43 | "body": [ |
|
18 | 50 | ], |
19 | 51 | "description": "React useEffect() hook" |
20 | 52 | }, |
21 | | - "useContext": { |
22 | | - "prefix": "uch", |
| 53 | + "useLayoutEffect": { |
| 54 | + "prefix": "uleh", |
23 | 55 | "body": [ |
24 | | - "const $1 = useContext($2);$0" |
| 56 | + "useLayoutEffect(() => {", |
| 57 | + "\t$1", |
| 58 | + "}, [${2}]);$0" |
25 | 59 | ], |
26 | | - "description": "React useContext() hook" |
| 60 | + "description": "React useLayoutEffect() hook" |
| 61 | + }, |
| 62 | + "useInsertionEffect": { |
| 63 | + "prefix": "uieh", |
| 64 | + "body": [ |
| 65 | + "useInsertionEffect(() => {", |
| 66 | + "\t$1", |
| 67 | + "}, [${2}]);$0" |
| 68 | + ], |
| 69 | + "description": "React useInsertionEffect() hook" |
| 70 | + }, |
| 71 | + "useMemo": { |
| 72 | + "prefix": "umh", |
| 73 | + "body": [ |
| 74 | + "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}]);$0" |
| 75 | + ], |
| 76 | + "description": "React useMemo() hook" |
27 | 77 | }, |
28 | 78 | "useCallback": { |
29 | 79 | "prefix": "ucbh", |
|
37 | 87 | ], |
38 | 88 | "description": "React useCallback() hook" |
39 | 89 | }, |
40 | | - "useMemo": { |
41 | | - "prefix": "umh", |
| 90 | + "useTransition": { |
| 91 | + "prefix": "uth", |
42 | 92 | "body": [ |
43 | | - "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}]);$0" |
| 93 | + "const [isPending, startTransition] = useTransition();$0" |
44 | 94 | ], |
45 | | - "description": "React useMemo() hook" |
| 95 | + "description": "React useTransition() hook" |
46 | 96 | }, |
47 | | - "import react hooks": { |
48 | | - "prefix": "irh", |
| 97 | + "useDeferredValue": { |
| 98 | + "prefix": "udvh", |
49 | 99 | "body": [ |
50 | | - "import React, { useState, useContext, useEffect, useCallback, useMemo } from 'react';" |
51 | | - ] |
| 100 | + "const ${1:deferredValue} = useDeferredValue(${2:value});$0" |
| 101 | + ], |
| 102 | + "description": "React useDeferredValue() hook" |
52 | 103 | }, |
53 | | - "useRef": { |
54 | | - "prefix": "urh", |
| 104 | + "useFormStatus": { |
| 105 | + "prefix": "ufsh", |
55 | 106 | "body": [ |
56 | | - "const $1 = useRef($2);$0" |
| 107 | + "const { ${1:pending}, ${2:data}, ${3:method}, ${4:action} } = useFormStatus();$0" |
57 | 108 | ], |
58 | | - "description": "React useRef() hook" |
| 109 | + "description": "React Dom useFormStatus() hook" |
59 | 110 | }, |
60 | | - "useReducer": { |
61 | | - "prefix": "urdh", |
| 111 | + "useDebugValue": { |
| 112 | + "prefix": "udbvh", |
62 | 113 | "body": [ |
63 | | - "const [${1:state},${2: dispatch}] = useReducer(${3:reducer}, ${4:initialArg}, ${5:init});" |
| 114 | + "useDebugValue(${1:value});$0" |
64 | 115 | ], |
65 | | - "description": "React useReducer() hook" |
| 116 | + "description": "React useDebugValue() hook" |
66 | 117 | }, |
67 | | - "import react-redux hooks": { |
68 | | - "prefix": "irrh", |
| 118 | + "useId": { |
| 119 | + "prefix": "uidh", |
69 | 120 | "body": [ |
70 | | - "import { useSelector, useDispatch } from 'react-redux';" |
71 | | - ] |
| 121 | + "const ${1:id} = useId();$0" |
| 122 | + ], |
| 123 | + "description": "React useId() hook" |
72 | 124 | }, |
73 | | - "useSelector": { |
74 | | - "prefix": "uss", |
| 125 | + "useSyncExternalStore": { |
| 126 | + "prefix": "usesh", |
75 | 127 | "body": [ |
76 | | - "const $1 = useSelector(state => state.$1);" |
77 | | - ] |
| 128 | + "const ${1:snapshot} = useSyncExternalStore(${2:subscribe}, ${3:getSnapshot}, ${4:getServerSnapshot});$0" |
| 129 | + ], |
| 130 | + "description": "React useSyncExternalStore() hook" |
78 | 131 | }, |
79 | | - "useDispatchFunction": { |
80 | | - "prefix": "usdf", |
| 132 | + "useActionState": { |
| 133 | + "prefix": "uash", |
81 | 134 | "body": [ |
82 | | - "const $1 = useDispatch($2);$3" |
83 | | - ] |
| 135 | + "const [${1:state}, ${2:formAction}, ${3:isPending}] = useActionState(${4:fn}, ${5:initialState});$0" |
| 136 | + ], |
| 137 | + "description": "React useActionState() hook" |
84 | 138 | }, |
85 | | - "useDispatch": { |
86 | | - "prefix": "usd", |
| 139 | + "useOptimistic": { |
| 140 | + "prefix": "uoh", |
87 | 141 | "body": [ |
88 | | - "const $1 = $2 => dispatch($3);" |
89 | | - ] |
| 142 | + "const [${1:optimisticState}, ${2:addOptimistic}] = useOptimistic(${3:state}, ${4:updateFn});$0" |
| 143 | + ], |
| 144 | + "description": "React useOptimistic() hook" |
90 | 145 | } |
91 | 146 | } |
0 commit comments