1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
# Import
snippet ir import React
import React from 'react';
snippet irc import React and Component
import React, { Component } from 'react';
snippet irh import React hooks
import { use$1 } from 'react';
snippet ird import ReactDOM
import ReactDOM from 'react-dom';
snippet irp import PropTypes
import PropTypes from 'prop-types';
# Lifecycle Methods
snippet cdm componentDidMount
componentDidMount() {
${1}
};
snippet cdup componentDidUpdate
componentDidUpdate(prevProps, prevState) {
${1}
};
snippet cwm componentWillMount
componentWillMount() {
${1}
};
snippet cwr componentWillReceiveProps
componentWillReceiveProps(nextProps) {
${1}
};
snippet cwun componentWillUnmount
componentWillUnmount() {
${1}
};
snippet cwu componentWillUpdate
componentWillUpdate(nextProps, nextState) {
${1}
};
snippet scu shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
${1}
}
# Props
snippet spt static propTypes
static propTypes = {
${1}: PropTypes.${2}
};
snippet pt propTypes
${1}.propTypes = {
${2}: PropTypes.${2}
};
snippet sdp static defaultProps
static defaultProps = {
${1}: ${2}
};
snippet dp defaultProps
${1}.defaultProps = {
${2}: ${3}
};
snippet pp props
props.${1};
snippet tp this props
this.props.${1};
# State
snippet st
state = {
${1}: ${2},
};
snippet sst
this.setState({
${1}: ${2}
});
snippet tst
this.state.${1};
# Component
snippet raf
const ${1:ComponentName} = (${2:props}) => {
${3:state}
return (
<>
${4}
</>
);
};
snippet rcla
class ${1:ClassName} extends Component {
render() {
return (
<>
${2}
</>
);
}
}
snippet ercla
export default class ${1:ClassName} extends Component {
render() {
return (
<>
${2}
</>
);
};
};
snippet ctor
constructor() {
super();
${1:state}
}
snippet ren
render() {
return (
<>
${2}
</>
);
}
snippet fup
forceUpdate(${1:callback});
# Hooks
snippet uses useState
const [${1:state}, set${2}] = useState(${3:initialState});
snippet usee useEffect
useEffect(() => {
${1}
});
snippet userd useReducer
const [${1:state}, ${2:dispatch}] = useReducer(${3:reducer});
snippet userf useRef
const ${1:refContainer} = useRef(${2:initialValue});
snippet usect useContext
const ${1:value} = useContext(${2:MyContext});
snippet usecb useCallback
const ${1:memoizedCallback} = useCallback(
() => {
${2}(${3})
},
[$3]
);
snippet usem useMemo
const ${1:memoizedCallback} = useMemo(() => ${2}(${3}), [$3]);
snippet usei useImperativeHandle
useImperativeHandle(${1:ref}, ${2:createHandle});
snippet used useDebugValue
useDebugValue(${1:value});
# ReactDOM methods
snippet rdr ReactDOM.render
ReactDOM.render(${1}, ${2});
snippet rdh ReactDOM.hydrate
ReactDOM.hydrate(${1:element}, ${2:container}[, ${3:callback}]);
snippet rdcp ReactDOM.createPortal
ReactDOM.createPortal(${1:child}, ${2:container});
|
