🎯 Tired of typing the same React boilerplate over and over again?
✨ Advanced React Snippets is here to cast a magical spell on your productivity!
Save keystrokes. Save time. Save your sanity.
Whether you're building components, working with hooks, or setting up context — Advanced React Snippets has your back (and your code).
🪄 "Turn repetitive typing into single-word magic!"
Start typing one of the prefixes, and IntelliSense will do the rest.
Here's a taste of what you get:
| Prefix | Description |
|---|---|
fc |
Function Component |
ffc |
Function Syntax Component (Arrow Function) |
sfc |
Stateless Function Component |
sfnc |
Stateless Function Named Component |
cc |
Class Component |
ccc |
Class Component with Constructor |
cpf |
Class Property Function |
hoc |
Higher Order Component |
ren |
render() method |
rprop |
Render Prop pattern |
| Prefix | Description |
|---|---|
usf |
Declare useState() Hook |
uef |
useEffect() Hook |
ucb |
useCallback() Hook |
usr |
Declare useRef() Hook |
| Prefix | Description |
|---|---|
imr |
Import React |
imrc |
Import React and Component |
impc |
Import React and PureComponent |
imrd |
Import react-dom |
imrs |
Import React and useState |
imrse |
Import React, useState, and useEffect |
impt |
Import PropTypes |
| Prefix | Description |
|---|---|
cdm |
componentDidMount() |
cdu |
componentDidUpdate() |
cwun |
componentWillUnmount() |
cdc |
componentDidCatch() |
cwm |
componentWillMount() (legacy) |
cwrp |
componentWillReceiveProps() (legacy) |
cwu |
componentWillUpdate() (legacy) |
gds |
getDerivedStateFromProps() |
gsbu |
getSnapshotBeforeUpdate() |
scu |
shouldComponentUpdate() |
| Prefix | Description |
|---|---|
ss |
this.setState() |
ssf |
Functional setState() |
| Prefix | Description |
|---|---|
cp |
Context Provider |
💡 Use the prefix (e.g., ffc) in a React .jsx or .tsx file, press Tab, and the boilerplate code will appear like ✨ magic!
⌨️ Just type the prefix, hit
Tab, and boom — the code appears!
✅ Functional Components (arrow + named)
✅ React Hooks: useState, useEffect, useCallback, useRef, and more
✅ Class Components: Legacy support for the nostalgia lovers
✅ Context API Boilerplates
✅ Error Boundaries & Lifecycle Methods
✅ ReactDOM, PropTypes Imports
✅ TypeScript + JavaScript support
✅ Naming conventions auto-filled (with VS Code tabstop magic ✨)
- 🟦 JavaScript React (
.jsx) - 🟨 TypeScript React (
.tsx)
Search for Advanced React Snippets in the VS Code Marketplace, or install via CLI:
code --install-extension HareeshBhittam.reactcraft-snippetsMIT License
If you like this extension, give it a star ⭐ and share it with other React devs!
Got ideas or feedback? Open an issue or create a pull request.
Let’s build this together! 💪
Made with ❤️ by Hareesh Bhittam
Follow for more dev wizardry 🧙♂️✨