Updated plugins

sources_non_forked/vim-snippets/snippets/javascript/javascript-react.snippets

@@ -1,98 +1,190 @@
-snippet ir
+# Import
+snippet ir import React
 	import React from 'react';
-snippet irc
+
+snippet irc import React and Component
 	import React, { Component } from 'react';
-snippet ird
+
+snippet irh import React hooks
+	import { use$1 } from 'react';
+
+snippet ird import ReactDOM
 	import ReactDOM from 'react-dom';
-snippet cdm
+
+snippet irp import PropTypes
+	import PropTypes from 'prop-types';
+
+# Lifecycle Methods
+snippet cdm componentDidMount
 	componentDidMount() {
 		${1}
-	}
-snippet cdup
+	};
+
+snippet cdup componentDidUpdate
 	componentDidUpdate(prevProps, prevState) {
 		${1}
-	}
-snippet cwm
+	};
+
+snippet cwm componentWillMount
 	componentWillMount() {
 		${1}
-	}
-snippet cwr
+	};
+
+snippet cwr componentWillReceiveProps
 	componentWillReceiveProps(nextProps) {
 		${1}
-	}
-snippet cwun
+	};
+
+snippet cwun componentWillUnmount
 	componentWillUnmount() {
 		${1}
-	}
-snippet cwu
+	};
+
+snippet cwu componentWillUpdate
 	componentWillUpdate(nextProps, nextState) {
 		${1}
+	};
+
+snippet scu shouldComponentUpdate
+	shouldComponentUpdate(nextProps, nextState) {
+		${1}
 	}
-snippet fup
-	forceUpdate(${1:callback});
-snippet dp
+
+# 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},
-	}
+		${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 pt
-	static propTypes = {
-		${1}: React.PropTypes.${2:type},
-	}
-snippet rfc
-	const ${1:ComponentName} = (${2:props}) => {
-		return (
-			<div>
-				$1
-			</div>
-		);
-	}
-snippet rcc
-	class ${1:ClassName} extends React.Component {
-		state = {
+	};
 
-		}
-		render() {
-			return (
-				<div>
-					$1
-				</div>
-			);
-		}
-	}
-snippet rdr
-	ReactDOM.render(${1}, ${2})
-snippet ercc
-	export default class ${1:ClassName} extends React.Component {
-		render() {
-			return (
-				${0:<div />}
-			);
-		}
-	}
-snippet ctor
-	constructor() {
-		super();
-		${1}
-	}
-snippet ren
-	render() {
-		return (
-			${1:<div />}
-		);
-	}
 snippet sst
 	this.setState({
 		${1}: ${2}
 	});
-snippet scu
-	shouldComponentUpdate(nextProps, nextState) {
-		${1}
+
+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 prp i
-	this.props.${1}
-snippet ste i
-	this.state.${1}
+
+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});