React Snippets

Here are some snippets I usually use for React Applications. You can copy and paste the snippets from here.

Import React

Snippets: ir

import * as React from 'react';
tsx

useState Hook

Snippets: us

const [state, setState] = React.useState(initialState);
tsx

useEffect Hook

Snippets: uf

React.useEffect(() => {}, []);
tsx

useReducer Hook

Snippets: ur

const [state, dispatch] = React.useReducer(someReducer, {});
tsx

useRef Hook

Snippets: urf

const someRef = React.useRef();
tsx

React Functional Components

To make a new component, I like to use export default function. Because when we need to rename it, we only need to do it once.

Snippets: rc

import * as React from 'react';
export default function Component() {
  return <div></div>;
}
tsx

Region Comment

This is not a React-specific snippet, but it is really useful when we need to group code. It is also collapsible in VSCode

Snippets: reg

//#region  //*============== FORM SUBMIT
//#endregion  //*============== FORM SUBMIT
tsx