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

# 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});