React Snippet (Visual Studio Code)

Version

The major corresponds to the official generation.

React Router

If you need Router please install the separate React Router Snippets extension and choose the appropriate version..

Snippets

• Import
• Hooks
• Class Component - State/Props
• Class Component - Lifecycle
• Functional Component - Hooks
• Functional Component
• Class Component
• Class Pure Component
• Function Memo Component
• Ref/Context
• PropTypes
• Chore

Import 🦢

prefix	body	description
imr	import React from 'react'	import React
imrus	import React, { useState } from 'react'	import React useState
imruu	import React, { useState, useEffect } from 'react'	import React useState useEffect
imrd	import ReactDOM from 'react-dom'	import ReactDOM
imrc	import React, { Component } from 'react'	import React Component
imrcpt	import React, { Component } from 'react', import PropTypes from 'prop-types'	import React Component PropTypes
imrpc	import React, { PureComponent } from 'react'	import React PureComponent
imrpcpt	import React, { PureComponent } from 'react', import PropTypes from 'prop-types'	import React PureComponent PropTypes
imrm	import React, { memo } from 'react'	import React memo
imrmpt	import React, { memo } from 'react', import PropTypes from 'prop-types'	import React memo PropTypes
impt	import PropTypes from 'prop-types'	import PropTypes

Hooks 🦋

useState (us/useState/hooks.useState) →

const [state, setstate] = useState(initialState)

useEffect (ue/useEffect/hooks.useEffect) →

useEffect(() => {

}, [])

useEffect Cleanup (uec/hooks.useEffect.Cleanup) →

useEffect(() => {


  return () => {

  }
}, [])

useRef (ure/useRef/hooks.useRef) →

const ref = useRef(initialValue)

useContext (uc/useContext/hooks.useContext) →

const featureContext = useContext(FeatureContext)

useReducer (ur/useReducer/hooks.useReducer) →

const [state, dispatch] = useReducer(reducer, initializerArg)

useCallback (ucb/useCallback/hooks.useCallback) →

let memoizedCallback = useCallback(() => {
  fn(deps)
}, [deps])

useMemo (um/useMemo/hooks.useMemo) →

let memoizedValue = useMemo(() => computeExpensiveValue(deps), [deps])

useImperativeHandle (uih/useImperativeHandle/hooks.useImperativeHandle) →

// exposed components
import React, { useRef, useImperativeHandle, forwardRef } from 'react'

function Button(props, ref) {
  const buttonRef = useRef()

  useImperativeHandle(ref, () => ({
    exposedProperty: () => {
      console.log(`event in Button`)
    },
  }))

  return (
    <button ref={buttonRef} {...props}>
      Button
    </button>
  )
}


export default forwardRef(Button)


// parent components
import React, { useRef } from 'react'
import Button from './Button'

function Form() {
  const buttonRef = useRef(null)

  const handleClick = () => {
    console.log(Object.keys(buttonRef.current))
    console.log('event in Form')
    buttonRef.current.exposedProperty()
  }

  return (
    <>
      <Button onClick={handleClick} ref={buttonRef} />
    </>
  )
}

useDebugValue (udv/useDebugValue/hooks.useDebugValue) →

useDebugValue(value)

useLayoutEffect (ule/useLayoutEffect/hooks.useLayoutEffect) →

useLayoutEffect(() => {
  // side effects


  // cleanup
  return () => {

  }
}, [])

useId (uid/useId/hooks.useId) →

const id = useId();

useDeferredValue (udv/useDeferredValue/hooks.useDeferredValue) →

const [deferredValue] = useDeferredValue(value)

useInsertionEffect (uie/useInsertionEffect/hooks.useInsertionEffect) →

useInsertionEffect(() => {

}, [])

useSyncExternalStore (uses/useSyncExternalStore/hooks.useSyncExternalStore) →

const state = useSyncExternalStore(subscribe, getSnapshot)

useTransition (ut/useTransition/hooks.useTransition) →

const [isPending, startTransition] = useTransition()

Class Component State/Props 🐟

prefix	body	description
dtp	const { } = this.props	destruct this.props
dts	const { } = this.state	destruct this.state
rst	state = { }	react state
tss	this.setState({})	this.setState with object
tssfn	this.setState((state, props) => { return { }})	this.setState with function
tp	this.props.propertyName	this.props property name
ts	this.state.propertyName	this.state property name
bfn	this.methodName = this.methodName.bind(this)	bind a function to a component instance

Functional Component 🌿

• rfc - Create React Functional Component
• rfce - Create React Functional Component and export
• rfced - Create React Functional Component and export it by default
• rfcpt - Create React Functional Component with PropTypes

// rfce  ↵
export function FileNamePascalCase() {
  return (
    <></>
  )
}

// rfcpt  ↵
import React from 'react'
import PropTypes from 'prop-types'

function FileNamePascalCase(props) {
  return (
    <>  </>
  )
}

FileNamePascalCase.propTypes = {  }

export default FileNamePascalCase

Class Component 🥀

• rcc - Create React Class Component and export it by default
• rccpt - Create React Class Component with PropTypes and export it by default
• rccl - Create React Class Component (all Lifecycle)

// rcc  ↵
import React, { Component } from 'react'

export default class FileNamePascalCase extends Component {
  constructor(props) {
    super(props)

    this.state = {  }

    this.handleEvent = this.handleEvent.bind(this)
  }

  componentDidMount() {  }

  componentDidUpdate(prevProps, prevState, snapshot) { if (prevState.name !== this.state.name) { this.handler() } }

  componentWillUnmount() {  }

  // Prototype methods, Bind in Constructor (ES2015)
  handleEvent() {}

  // Class Properties (Stage 3 Proposal)
  handler = () => { this.setState() }

  render() {
    return (
      <></>
    )
  }
}

Class Component Lifecycle 🐠

prefix	body
constructor	constructor(props) { super(props); this.state = { }; this.handleEvent = this.handleEvent.bind(this) }
cdm	componentDidMount(){ }
cdu	componentDidUpdate(prevProps, prevState){ ... }
cwu	componentWillUnmount(){ }
gdsfp	static getDerivedStateFromProps(nextProps, prevState){ }
gdsfe	static getDerivedStateFromError(error){ }
gsbu	getSnapshotBeforeUpdate(prevProps, prevState){ }
scu	shouldComponentUpdate(nextProps, nextState, nextContext){ }
render	render(){ return <></> }
cwm	UNSAFE_componentWillMount(){ }
cwrp	UNSAFE_componentWillReceiveProps(nextProps, nextContext){ }
cwup	UNSAFE_componentWillUpdate(nextProps, nextState, nextContext){ }

Class Pure Component 🐙

• rpc - Create React.PureComponent and export it by default, it's works with class-based components
• rpcpt - Create React.PureComponent with PropTypes and export it by default, it's works with class-based components

// rpc  ↵
import React, { PureComponent } from 'react'

export default class FileNamePascalCase extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {  }

    this.handleEvent = this.handleEvent.bind(this)
  }

  componentDidMount() {  }

  render() {
    return (
      <></>
    )
  }
}

Function Memo Component 🌵

• rmc - Create React.memo Component and export it by default, it's works with functional components
• rmcpt - Create React.memo Component with PropTypes and export it by default, it's works with functional components

// rmc  ↵
import React, { memo } from 'react'

export default memo(function FileNamePascalCase(props) {
  return (
    <></>
  )
})

Ref/Context 🌾

prefix	body	description
ref	this.refName = React.createRef()	Create ref statement used inside constructor
fref	const ref = React.forwardRef((props, ref) => ( ... ))	Forward ref statement used inside component
context	const contextName = React.createContext()	Create React context

PropTypes 🍂

prefix	body
pt.array	PropTypes.array,
pt.array.required	PropTypes.array.isRequired,
pt.bool	PropTypes.bool,
pt.bool.required	PropTypes.bool.isRequired,
pt.func	PropTypes.func,
pt.func.required	PropTypes.func.isRequired,
pt.number	PropTypes.number,
pt.number.required	PropTypes.number.isRequired,
pt.object	PropTypes.object,
pt.object.required	PropTypes.object.isRequired,
pt.string	PropTypes.string,
pt.string.required	PropTypes.string.isRequired,
pt.symbol	PropTypes.symbol,
pt.symbol.required	PropTypes.symbol.isRequired,
pt.any	PropTypes.any,
pt.any.required	PropTypes.any.isRequired,
pt.arrayOf	PropTypes.arrayOf(),
pt.arrayOf.required	PropTypes.arrayOf().isRequired,
pt.element	PropTypes.element,
pt.element.required	PropTypes.element.isRequired,
pt.elementType	PropTypes.elementType,
pt.elementType.required	PropTypes.elementType.isRequired,
pt.instanceOf	PropTypes.instanceOf(Constructor),
pt.instanceOf.required	PropTypes.instanceOf(Constructor).isRequired,
pt.node	PropTypes.node,
pt.node.required	PropTypes.node.isRequired,
pt.objectOf	PropTypes.objectOf(),
pt.objectOf.required	PropTypes.objectOf().isRequired,
pt.oneOf	PropTypes.oneOf(value),
pt.oneOf.required	PropTypes.oneOf(value).isRequired,
pt.oneOfType	PropTypes.oneOfType([]),
pt.oneOfType.required	PropTypes.oneOfType([]).isRequired,
pt.shape	PropTypes.shape({}),
pt.shape.required	PropTypes.shape({}).isRequired,
pt.exact	PropTypes.exact({}),
pt.exact.required	PropTypes.exact({}).isRequired,
pt.custom	function (props, propName, componentName) {}
pt.custom.array	PropTypes.arrayOf(function (propValue, key, componentName, location, propFullName) {})
pt.checkPropTypes	PropTypes.checkPropTypes(MyComponent.propTypes, props, 'prop', 'MyComponent')
pt.resetWarningCache	PropTypes.resetWarningCache()
PT.defaultProps	static defaultProps = {}

Chore

• hoc - HOC Component

🤞

License

MIT License