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 🦢

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 🐟

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 🐠

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 🌾

PropTypes 🍂

Chore

• hoc - HOC Component

🤞

License

MIT License