snippets.mdx

Snippets

Here are some snippets I usually use for React Applications. You can copy and paste the snippets from here.

Import React

Snippets: ir

import * as React from 'react'

useState Hook

Snippets: us

const [state, setState] = React.useState(initialState)

useEffect Hook

Snippets: uf

React.useEffect(() => {}, [])

useReducer Hook

Snippets: ur

const [state, dispatch] = React.useReducer(someReducer, {})

useRef Hook

Snippets: urf

const someRef = React.useRef()

React Functional Components

To make a new component, I like to use export default function. Because when we need to rename it, we only need to do it once.

Snippets: rc

import * as React from 'react'
export default function Component() {
  return <div></div>
}

Region Comment

This is not a React-specific snippet, but it is really useful when we need to group code. It is also collapsible in VSCode

Snippets: reg

//#region  //*============== FORM SUBMIT
//#endregion  //*============== FORM SUBMIT