A collection of some JS/React snippets I use in VS Code

My User Snippets

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  // "Print to console": {
  // 	"scope": "javascript,typescript",
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }

  // "Print to console": {
  //   "scope": "javascript,typescript",
  //   "prefix": "cl",
  //   "body": ["console.log($1);"],
  //   "description": "Log output to console"
  // },

  "Print to console": {
    "scope": "javascript,typescript, javascriptreact",
    "prefix": "cl",
    "body": ["console.log($0);"],
    "description": "Log output to console"
  },

  "arrow-function": {
    "scope": "javascript,typescript, javascriptreact",
    "prefix": "arf",
    "body": ["$1 = ($2) => {", "\t$3", "}"]
  },

  "React Functional Component Boilerplate": {
    "scope": "javascriptreact",
    "prefix": "rfc",
    "body": [
      "",
      "const ${1:componentName} = () => {",
      "  return (",
      "    <div>",
      "      ${2}",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:componentName}"
    ],
    "description": "React Functional Component Boilerplate"
  },

  "React useState": {
    "scope": "javascriptreact",
    "prefix": "uss",
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})"
    ]
  },

  "React useEffect": {
    "scope": "javascriptreact",
    "prefix": "ues",
    "body": [
      "useEffect(() => {",
      "  ${1:effect}",	
      "  return () => {",
      "    ${2:cleanUp}",
      "  }",
      "}, [${3:dependency}])"
    ]
}