React Snippet (Visual Studio Code)

中文 README

Design Notes

Due to the React Hooks 'Functional Programming' paradigm, there is not much structural code. Especially with the React Compiler, you no longer need to manually reach for useMemo, useCallback, or React.memo, so there is very little template code remaining.

Therefore, this snippet extension only includes the following three parts:

1. Functional components
2. Common Hooks
3. Common APIs

Snippets

(1). Functional Components

fc - React Functional Component (TypeScript)

export interface FeatureProps {

}

export default function Feature(props: FeatureProps) {


  return (

  );
}

rfc - React Functional Component (TypeScript)

interface FeatureProps {

}

function Feature(props: FeatureProps) {


  return (

  );
}

fc - React Functional Component

export default function Feature(props) {


  return (

  );
}

rfc - React Functional Component

function Feature(props) {


  return (

  );
}

• Functional Component
• React API
  • <Activity>
  • <Profiler>
  • <Suspense>

(2). Hooks

useCallback - useCallback >>

const handler = useCallback((param) => {}, [dependencies]);

• State Hooks
  • useState
  • useReducer
• Context Hook
  • useContext
• Ref Hooks
  • useRef
  • useImperativeHandle
• Effect Hooks
  • useEffect
  • useLayoutEffect
  • useInsertionEffect
  • useEffectEvent
• Performance Hooks
  • useMemo
  • useCallback
  • useTransition
  • useDeferredValue
• Other Hooks
  • useActionState
  • useSyncExternalStore
  • useOptimistic
• Form Hooks
  • useFormStatus

(3). APIs

memo >>

import { memo } from 'react';

export interface FeatureProps {

}

const Feature = memo(function Feature(props: FeatureProps) {


  return (

  );
});

export default Feature;

• React API
  • lazy
  • memo
  • createContext
  • startTransition
• React DOM API
  • createPortal
• Client React DOM API
  • createRoot

Related Snippets

If you need react-router, please install React Router Snippets.

If you need zustand + immer, please install Zustand + Immer Snippets.

License

MIT License