Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>React snippets: SimplifiedNew to Visual Studio Code? Get it now.
React snippets: Simplified

React snippets: Simplified

Kenajoh

|
400 installs
| (1) | Free
A collection of snippets without the bloat - Snippets for daily use
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

React-snippets: simplified

A collection of snippets without the redux/native bloat.

Made for daily use when developing react-applications.

Snippets

Snippet
useEffect useEffect
useLayoutEffect useLayoutEffect
useState useState
useCallback useCallback
useContext useContext
useMemo useMemo
useRef useRef
useTransition useTransition
useEvent custom event hook
cla className
cl console.log

Description

useEffect

useEffect(() => {

  return () =>
}, [])

useLayoutEffect

useLayoutEffect(() => {

  return () =>
}, [])

useState

// JS
const [state, setState] = useState();

// TS
const [state, setState] = useState<type>();

useCallback

const callback = useCallback(() => {
  func(a);
}, [a]);

useContext

// JS
const context = useContext(ctx);

// TS
const context = useContext<type>(ctx);

useMemo

// JS
const value = useMemo(() => calc(a), [a]);

// TS
const value: type = useMemo(() => calc(a), [a]);

useRef

// JS
const ref = useRef(null);

// TS
const ref = useRef<type>(null);

useTransition

const [isPending, startTransition] = useTransition();

useEvent

Not used often, but when needed its a pain to boilerplate.

const callback = useCallback(() => {
  calc(a);
}, [a]);

useEffect(() => {
  window.addEventListener(event, callback);

  return () => {
    window.removeEventListener(event, callback);
  };
}, [callback]);

cla

For the extra lazy (like me)

className = ""

cl

Logs output in object format

console.log({ value });
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft