Create your own snippets extension for your React and Next.js projects

Haseeb
3 min readNov 12, 2023

Say goodbye to repetitive tasks and hello to increased productivity by creating your own snippets in vs code. Having these type of snippets make you feel like you are a pro react developer 😉. Without wasting time let`s dive into the vs code and learn how to set up it .

It is pretty simple just open the vs code then go to the settings > User Snippets> Create New Global snippets file with xyz.json name and then… nothing . It is simple as it is.

let me share with you my snippet file

{
"Console Log": {
"prefix": "cl",
"body": [
"console.log($1);"
]
},
"React useState": {
"prefix": "us",
"body": [
"const [$1, set$2] = useState($3);"
]
},

"React useEffect": {
"prefix": "ue",
"body": [
"useEffect(() => {",
" $1",
"}, [$2]);"
]
},
"React useCallback": {
"prefix": "ucb",
"body": [
"useCallback(() => {",
" $1",
"}, [$2]);"
]
},
"React useMemo": {
"prefix": "umm",
"body": [
"useMemo(() => {",
" $1",
"}, [$2]);"
]
},
"Async React Function Component": {
"prefix": "arjsfc",
"body": [
"const $1 = async () => {",
" return $2;",
"};",
"",
"export default $1;"
]
},
"Async React Function Component with Props": {
"prefix": "arjsfcp",
"body": [
"type $1Props ={}",
"",
"const $1 = async ({}: $1Props) => {",
" return $2;",
"};",
"",
"export default $1;"
]
},
"React Function Component": {
"prefix": "rjsfc",
"body": [
"const $1 = () => {",
" return $2;",
"};",
"",
"export default $1;"
]
},
"React Function Component with Props": {
"prefix": "rjsfcp",
"body": [
"interface $1Props {}",
"",
"const $1 = ({}: $1Props) => {",
" return $2;",
"};",
"",
"export default $1;"
]
}

,
"React Query useQuery for get request": {
"prefix": "rqg",
"body": [
"import { useQuery } from '@tanstack/react-query';",
"",
"const fetch${1} = async () => {",
" const response = await fetch('${2}');",
" const data = await response.json();",
" return data;",
"};",
"",
"const ${1} = () => {",
" const { data, isLoading, error } = useQuery('${1}', fetch${1});",
"",
" if (isLoading) {",
" return <div>Loading...</div>;",
" }",
"",
" if (error) {",
" return <div>Error: {error.message}</div>;",
" }",
"",
" return (",
" <div>",
" {data.map((${3}) => (",
" <div key={${3}.id}>",
" <h3>${3}.title</h3>",
" <p>${3}.completed ? 'Completed' : 'Not completed'}</p>",
" </div>",
" ))}",
" </div>",
" );",
"};",
"",
]
"export default ${1};",
},
"React Query useMutation for mutate request": {
"prefix": "rqm",
"body": [
"import { useMutation } from '@tanstack/react-query';",
"",
"const create${1} = async (new${1}) => {",
" const response = await fetch('${2}', {",
" method: 'POST',",
" headers: {",
" 'Content-Type': 'application/json',",
" },",
" body: JSON.stringify(new${1}),",
" });",
" const data = await response.json();",
" return data;",
"};",
"",
"const Create${1}Form = () => {",
" const [new${1}, setNew${1}] = useState('');",
"",
" const { mutate, isLoading, error } = useMutation(create${1}, {",
" onSuccess: (data) => {",
" setNew${1}('');",
" console.log('${1} created successfully!');",
" },",
" onError: (error) => {",
" console.error('Error creating ${1}:', error);",
" },",
" });",
"",
" const handleSubmit = async (event) => {",
" event.preventDefault();",
"",
" if (!new${1}) {",
" return;",
" }",
"",
" await mutate({ title: new${1}, completed: false });",
" };",
"",
" return (",
" <form onSubmit={handleSubmit}>",
" <input",
" type=\"text\"",
" value={new${1}}",
" onChange={(event) => setNew${1}(event.target.value)}",
" />",
" <button type=\"submit\" disabled={isLoading}>Create ${1}</button>",
" </form>",
" );",
"};",
"",
"export default Create${1}Form;",
]
}
}

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Haseeb
Haseeb

Responses (2)

Write a response

For useState you can prefer this:
```
const [$1, set${1/(.*)/${0:/capitalize}/}] = useState($2)$0
```

thanks for sharing, there is a tiny typo in line 120. "export default ${1};" will be inside third bracket