Useful VS Code snippets for React development by Alican (a great colleague of mine)

vscode-snippets.json

{
  "Component": {
    "prefix": "%ccomp",
    "body": [
      "import * as React from 'react';",
      "import styled from 'styled-components';",
      "",
      "export interface ${1:Component}Props {}",
      "",
      "interface ${1:Component}State {}",
      "",
      "export const ${1:Component}Style = styled.div``;",
      "",
      "export class ${1:Component} extends React.Component<${1:Component}Props, ${1:Component}State> {",
      "  constructor(props: ${1:Component}Props) {",
      "    super(props);",
      "",
      "    this.state = {};",
      "  }",
      "",
      "  render() {",
      "    return <${1:Component}Style>{}</${1:Component}Style>;",
      "  }",
      "}"
    ],
    "description": "Creates a component"
  },
  "Stateless Component": {
    "prefix": "%comp",
    "body": [
      "import * as React from 'react';",
      "import styled from 'styled-components';",
      "",
      "export interface ${1:Component}Props {}",
      "",
      "export const ${1:Component}Style = styled.div``;",
      "",
      "export const ${1:Component}: React.FC<${1:Component}Props> = (props: ${1:Component}Props) => {",
      "  return <${1:Component}Style>{}</${1:Component}Style>;",
      "};"
    ],
    "description": "Creates a stateless component"
  },
  "Plain Component": {
    "prefix": "%pcomp",
    "body": [
      "import * as React from 'react';",
      "",
      "export interface ${1:Component}Props {${2}}",
      "",
      "export const ${1:Component}: React.FC<${1:Component}Props> = (props: ${1:Component}Props) => {",
      "  return null;",
      "};",
      "${3}"
    ],
    "description": "Component without style"
  },
  "UseState": {
    "prefix": "%hstate",
    "body": [
      "const [${1:state}, set${2:state_setter}] = React.useState(${3:state_value});"
    ],
    "description": "State Hook"
  },
  "UseCallback": {
    "prefix": "%hcallback",
    "body": [
      "const ${1:callback_name} = React.useCallback((${2:args}) => {",
      "  ${3:body}",
      "}, [${4:inputs}]);"
    ],
    "description": "Callback Hook"
  },
  "UseEffect": {
    "prefix": "%heffect",
    "body": ["React.useEffect(() => {${1:body}}, [${2:inputs}]);"],
    "description": "EffectHook"
  }
}