The Best Vscode Snippets for React Typescript + Nextjs + Redux Toolkit
Tags: vscode, react, nextjs, typescript
Published: 2024-03-31 19:12:03

Have you ever tried the [ES7 React snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) extension? Have you ever felt overwhelmed by the sheer number of snippets it offers? If not, here's my selection of the most essential snippets. By focusing on just the necessities, you can slim down your Visual Studio Code setup and streamline your coding experience.

## React

> Most common react Hooks snippets

#### React useState - us

```json
"React useState": {
    "prefix": "us",
    "body": [
      "const [$1, set$2] = useState($3);"
    ]
  },
```

#### React useEffect - ue

```json
  "React useEffect": {
    "prefix": "ue",
    "body": [
      "useEffect(() => {",
      "  $1",
      "}, [$2]);"
    ]
  },
```

#### React useCallback - ucb

```json
  "React useCallback": {
    "prefix": "ucb",
    "body": [
      "useCallback(() => {",
      "  $1",
      "}, [$2]);"
    ]
  },
```

#### React useMemo - umm

```json
  "React useMemo": {
    "prefix": "umm",
    "body": [
      "useMemo(() => {",
      "  $1",
      "}, [$2]);"
    ]
  },
```


#### React Functional components - rafce

```json
"React Function Component": {
    "key": "reactArrowFunctionExportComponent",
    "prefix": "rafce",
    "body": [
      "const ${1:${TM_FILENAME_BASE}} = () => {",
      "  return (",
      "    <div>",
      "      <h1>${1:first}</h1>",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}"
    ],
    "description": "Creates a React Arrow Function Component with ES7 module system",
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
```

#### React Functional components with props - rafcep

```json
  "React Function Component with Props": {
    "key": "reactArrowFunctionExportComponent",
    "prefix": "rafcep",
    "body": [
      "interface $1Props {}",
      "",
      "const ${1:${TM_FILENAME_BASE}} = ({}: $1Props) => {",
      "  return (",
      "    <div>",
      "      <h1>${1:first}</h1>",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}"
    ],
    "description": "Creates a React Arrow Function Component with ES7 module system",
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
```

## Nextjs

> Nextjs server components 

#### Asynchronous react functional component - arafce

```json
"Async React Function Component": {
    "prefix": "arafce",
    "body": [
      "const ${1:${TM_FILENAME_BASE}} = async () => {",
      "  return (",
      "    <div>",
      "      <h1>${1:first}</h1>",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}"
    ]
  },
```

#### Asynchronous react functional component with props - arafcep

```json
"Async React Function Component with Props": {
    "prefix": "arafcep",
    "body": [
      "interface $1Props {}",
      "",
      "const ${1:${TM_FILENAME_BASE}} = async ({}: $1Props) => {",
      "  return (",
      "    <div>",
      "      <h1>${1:first}</h1>",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}}"
    ]
  },
```

## Imports alias - imp & imd

```json
  "import": {
    "key": "import",
    "prefix": "imp",
    "body": ["import ${2:second} from '${1:first}'"],
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
```

```json
"importDestructing": {
    "key": "importDestructing",
    "prefix": "imd",
    "body": ["import { ${2:second} } from '${1:first}'"],
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
```

## Redux Toolkit - rxslice

```json
"reduxSlice": {
    "key": "reduxSlice",
    "prefix": "rxslice",
    "body": [
      "import { createSlice } from '@reduxjs/toolkit'",
      "",
      "const initialState = {",
      "  ${3}",
      "}",
      "",
      "const ${1:${TM_FILENAME_BASE}} = createSlice({",
      "  name: '${2:second}',",
      "  initialState,",
      "  reducers: {}",
      "});",
      "",
      "export const {} = ${1:${TM_FILENAME_BASE}}.actions",
      "",
      "export default ${1:${TM_FILENAME_BASE}}.reducer"
    ],
    "scope": "typescript,typescriptreact,javascript,javascriptreact"
  },
}
```

Add the above code snippets to your `typescriptreact.json` file or use my snippet file in your VSCode. [Github](https://github.com/Bhanu1776/Workflow-setup/blob/master/Vscode/typescriptreact.json)