VSCODE_SNIPPETS

NEXT_TYPESCRIPT.json

{
  "Next Typescript React Functional Component": {
    "prefix": "fc",
    "body": [
      "import { FC } from 'react';",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      " $1",
      "}",
      "",
      "const $TM_FILENAME_BASE:FC<${TM_FILENAME_BASE}Props> =({$2})=>{",
      "  return <div>$TM_FILENAME_BASE</div>",
      "}",
      "",
      "export default $TM_FILENAME_BASE",
      "$2"
    ],
    "description": "Next Typescript React Functional Component"
  },
  "useEffect snippet": {
    "prefix": "effect",
    "body": ["useEffect(() => {", "$1", "}, [$2]);"],
    "description": "React useEffect snippet for client side components"
  },
  "useState snippet": {
    "prefix": "state",
    "body": ["const [$1,set${1/(.*)/${1:/capitalize}/}] = useState<$2>($3)"],
    "description": "React useState snippet for client side components"
  },
  "useRef snippet": {
    "prefix": "ref",
    "body": ["const $1 = useRef<$2>($3)"],
    "description": "React useRef snippet for client side components"
  },
  "useCallback snippet": {
    "prefix": "callback",
    "body": ["const $1 = useCallback(($2) => {", "  $3", "}, [$4]);"],
    "description": "React useCallback snippet for client side components"
  }
}

I love these! Exactly what i was looking for