Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Essential React/React Native SnippetsNew to Visual Studio Code? Get it now.
Essential React/React Native Snippets

Essential React/React Native Snippets

yu1ia vasyleniuk

|
204 installs
| (0) | Free
Elegant and useful snippets for React, React Native, Expo. Simple and to the point.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Before we start 🟠

You can remember and find the right keys for these snippets on your keyboard with ease. Add this awesome set to boost your productivity.⚡

Note: kebab-case, snake_case, camelCase are formatted in PascalCase.
E.g. primary-btn.jsx + asfr turns into export default function PrimaryBtn() {} etc.

Finally, I dedicate this extension to my dad, who celebrates his birthday on 13th of May.👋🎉

Overview

Snippet Description
asy Arrow function named export ℹ️
asd Arrow function default export ℹ️
asfr File related function ℹ️
aswr Folder related function ℹ️
uas useActionState hook ℹ️
us useState hook ℹ️
uo useOptimistic hook ℹ️
uref useRef hook ℹ️
ue useEffect hook ℹ️
ule useLayoutEffect hook ℹ️
cctx Create Context ℹ️
fli FlatList ℹ️
ec Expo Component ℹ️
ss StyleSheet ℹ️
ssac StyleSheet align center ℹ️
ssrw StyleSheet row ℹ️
ess Export StyleSheet ℹ️
ersea useLocalSearchParams hook ℹ️
ers Expo Router Stack layout ℹ️
ert Expo Router Tabs layout ℹ️

React

Note: In examples below the vertical bar | is just a positioned cursor.


asy : 💡 Arrow function named export ⬆️

export const Example = () => {
    return (
        <>|</>
    )
}

asd : 💡 Arrow function default export ⬆️

const Example| = () => {
    return (
        <></>
    )
}

export default Example|;

asfr : 💡 Function name relates to file name ⬆️

export default function Example() {
    return (
        <>|</>
    )
}

aswr : 💡 Function name relates to folder (wrapper) name ⬆️

export default function FolderName() {
    return (
        <>|</>
    )
}

uas : 💡 useActionState hook ⬆️

const [error, action, isPending] = useActionState(fn, null);

us : 💡 useState hook ⬆️

const [|, set|] = useState("");
// press `Tab` after typing the value and let magic happen

uo : 💡 useOptimistic hook ⬆️

const [optimistic|, setOptimistic|] = useOptimistic(asyncRes, (state, action) => {});
// press `Tab` after typing the value and let magic happen

uref : 💡 useRef hook ⬆️

const |Ref = useRef(null);

ue : 💡 useEffect hook ⬆️

useEffect|(() => {
    
}, [])
// press `Ctrl`+`Space` to import useEffect

ule : 💡 useLayoutEffect hook ⬆️

useLayoutEffect|(() => {
    
}, [])
// press `Ctrl`+`Space` to import useLayoutEffect

cctx : 💡 Create React Context ⬆️

import { createContext, useContext } from "react";

export const |Context = createContext(null);

export const |ContextProvider = ({ children }) => {
    

    return (
        <|Context value={{}}>
            {children}
        </|Context>
    );
}

export const use| = () => {
    const value = useContext(|Context);

    if (!value) {
        throw new Error(`use| must be wrapped inside |ContextProvider`);
    }

    return value;
}

React Native, Expo

fli : 💡 FlatList ⬆️

<FlatList|
    data={data|}
    keyExtractor={item => item.id}
    showsVerticalScrollIndicator={false}
    renderItem={({ item }) => (
        <RenderItem| />
    )}
/>

ec : 💡 Expo Component ⬆️

import { View, Text } from 'react-native';

export const Example = () => {
    return (
        <View>
            <Text>Example|</Text>
        </View>
    )
}

ss : 💡 StyleSheet ⬆️

const styles = StyleSheet|.create({
    
})

ssac : 💡 StyleSheet align center ⬆️

container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 16,|
},

ssrw : 💡 StyleSheet row ⬆️

rowContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    margin: 16,|
},

ess : 💡 Export StyleSheet ⬆️

import { StyleSheet } from "react-native";

export default StyleSheet.create({
    mainContainer: {
        flex: 1,
        backgroundColor: "#fff",|
    },
})

ersea : 💡 useLocalSearchParams hook ⬆️

const { } = useLocalSearchParams();

ers : 💡 Expo Router Stack layout ⬆️

import { Stack } from "expo-router";


export default function StackLayout() {
    return (
        <Stack>
            <Stack.Screen name="|" options={{ | }} />
        </Stack>
    )
}

ert : 💡 Expo Router Tabs layout ⬆️

import { Tabs } from "expo-router";


export default function TabsLayout() {
    return (
        <Tabs
            screenOptions={{|}}
        >
            <Tabs.Screen name="|" options={{ | }} />
        </Tabs>
    )
}

Demo

Demo of how some snippets work

That's it! Install and happy coding!


Lastly

Just to make your work with this extension more comfortable, you can disable [abc] suggestion in VS Code using following steps:

Ctrl + , opens Settings⚙️ > type "show words" in the Search field > uncheck 'Editor>Suggest: Show Words'
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft