diff --git a/README.md b/README.md
index 5012249..e9a46e6 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,14 @@ Here is direct link to marketplace [ES7 React/Redux/React-Native/JS Snippets](ht
 Every space inside `{ }` and `( )` means that this is pushed into next line :)
 `$` represent each step after `tab`.
 
+Use `tab` to skip to the next step.
+In some cases, text will be capitalized. For example: `useState`
+<br>
+![Alt Text](./images/capitalize.gif)
+<br>
+
+After `count` is entered for `$1`, once `tab` is typed, `setCount` is capitalized.
+
 _TypeScript_ has own components and own snippets. Use search or just type `ts` before every component snippet.
 
 I.E. `tsrcc`
@@ -414,6 +422,16 @@ const $1 = () => {
 export default $1
 ```
 
+### `rafcne`
+
+```javascript
+import React from 'react'
+
+export const $1 = () => {
+  return <div>$0</div>
+}
+```
+
 ### `rmc`
 
 ```javascript
@@ -439,6 +457,150 @@ $1.propTypes = {}
 export default $1
 ```
 
+### `fet`
+
+```javascript
+useEffect(() => {
+  const url = '$0'
+  fetch(url)
+    .then((res) => res.json())
+    .then((json) => {
+      console.log(json)
+    })
+}, [])
+```
+
+### `feta`
+
+```javascript
+useEffect(() => {
+  const url = '$0'
+  async function fetchApi() {
+    const res = await fetch(url)
+    const json = await res.json()
+    console.log(json)
+  }
+  fetchApi()
+}, [])
+```
+
+### `fets`
+
+```javascript
+const [{$1}, set{$1}] = useState($2)
+
+useEffect(() => {
+  const url = '$0'
+  fetch(url)
+    .then((res) => res.json())
+    .then((json) => {
+      set{$1}(json)
+    })
+}, [])
+```
+
+### `fetas`
+
+```javascript
+const [{$1}, set{$1}] = useState($2)
+
+useEffect(() => {
+  const url = '$0'
+  async function fetch{$1}() {
+    const res = await fetch(url)
+    const json = await res.json()
+    set{$1}(json)
+  }
+  fetch{$1}()
+}, [])
+
+```
+
+### `rfcfets`
+
+```javascript
+import React, { useState, useEffect } from 'react'
+
+const $1 = () => {
+  const [{$2}, set{$2}] = useState($3)
+
+  useEffect(() => {
+    const url = '$0'
+    fetch(url)
+      .then((res) => res.json())
+      .then((json) => {
+        set{$2}(json)
+      })
+  }, [])
+
+  return <div>{$2}</div>
+}
+
+export default $1
+```
+
+### `rfcfetas`
+
+```javascript
+import React, { useState, useEffect } from 'react'
+
+const $1 = () => {
+  const [{$2}, set{$2}] = useState($3)
+
+  useEffect(() => {
+    const url = '$0'
+    async function fetch{$2}() {
+      const res = await fetch(url)
+      const json = await res.json()
+      set{$2}(json)
+    }
+    fetch{$2}()
+  }, [])
+
+  return <div>{$2}</div>
+}
+
+export default $1
+
+```
+
+### `rcp`
+
+```javascript
+import React, { useState } from 'react'
+
+const {$1}Context = React.createContext()
+
+function {$1}Provider({ children }) {
+  const [{$1}, set{$1}] = useState($2)
+  const value = { {$1}, set{$1} }
+  return <{$1}Context.Provider value={value}>{children}</{$1}Context.Provider>
+}
+export { {$1}Provider }
+```
+
+### `rcphook`
+
+```javascript
+import React, { useState } from 'react'
+
+const {$1}Context = React.createContext()
+
+function {$1}Provider({ children }) {
+  const [{$1}, set{$1}] = useState($2)
+  const value = { {$1}, set{$1} }
+  return <{$1}Context.Provider value={value}>{children}</{$1}Context.Provider>
+}
+function use{$1}() {
+  const context = React.useContext({$1}Context)
+  if (context === undefined) {
+    throw new Error('use{$1} must be used within a {$1}Provider')
+  }
+  return context
+}
+export { {$1}Provider, use{$1} }
+```
+
 ### `rcredux`
 
 ```javascript
diff --git a/images/capitalize.gif b/images/capitalize.gif
new file mode 100644
index 0000000..b6b96e8
Binary files /dev/null and b/images/capitalize.gif differ
diff --git a/snippets/snippets.json b/snippets/snippets.json
index 9807929..1efb803 100644
--- a/snippets/snippets.json
+++ b/snippets/snippets.json
@@ -407,6 +407,18 @@
     ],
     "description": "Creates a React Arrow Function Component with ES7 module system"
   },
+  "reactArrowFunctionNamedExportComponent": {
+    "prefix": "rafcne",
+    "body": [
+      "import React from 'react'",
+      "",
+      "export const ${1:${TM_FILENAME_BASE}} = () => {",
+      "  return <div>$0</div>",
+      "}",
+      ""
+    ],
+    "description": "Creates a React Arrow Function Component with ES7 module system with named export"
+  },
   "reactArrowFunctionComponent": {
     "prefix": "rafc",
     "body": [
@@ -594,6 +606,58 @@
     ],
     "description": "Creates a React component class with PropTypes and ES7 module system"
   },
+  "reactFunctionalComponentFetchWithState": {
+    "prefix": "rfcfets",
+    "body": [
+      "import React, { useState, useEffect } from 'react'",
+      "",
+      "const ${1:${TM_FILENAME_BASE}} = () => {",
+      "  const [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState($3)",
+      "  ",
+      "  useEffect(() => {",
+      "    const url = '$0'",
+      "    fetch(url)",
+      "      .then((res) => res.json())",
+      "      .then((json) => {",
+      "        set${2/(.*)/${1:/capitalize}/}(json)",
+      "      })",
+      "  }, [])",
+      "  ",
+      "  return <div>{$2}</div>",
+      "}",
+      "",
+      "export default ${1:${TM_FILENAME_BASE}}",
+      ""
+    ],
+    "description": "Creates a React Function component with a data fetching effect with state"
+  },
+
+  "reactFunctionalComponentFetchAwaitWithState": {
+    "prefix": "rfcfetas",
+    "body": [
+      "import React, { useState, useEffect } from 'react'",
+      "",
+      "const ${1:${TM_FILENAME_BASE}} = () => {",
+      "  const [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState($3)",
+      "",
+      "  useEffect(() => {",
+      "    const url = '$0'",
+      "    async function fetch${2/(.*)/${1:/capitalize}/}() {",
+      "      const res = await fetch(url)",
+      "      const json = await res.json()",
+      "      set${2/(.*)/${1:/capitalize}/}(json)",
+      "    }",
+      "    fetch${2/(.*)/${1:/capitalize}/}()",
+      "  }, [])",
+      "  ",
+      "  return <div>{$2}</div>",
+      "}",
+      "",
+      "export default ${1:${TM_FILENAME_BASE}}",
+      ""
+    ],
+    "description": "Creates a React Function component with a data fetching effect (await syntax) with state"
+  },
   "reactClassCompomentRedux": {
     "prefix": "rcredux",
     "body": [
@@ -816,6 +880,46 @@
     "body": ["const ${1:contextName} = React.createContext()", ""],
     "description": "Create React context"
   },
+  "contextProvider": {
+    "prefix": "rcp",
+    "body": [
+      "import React, { useState } from 'react'",
+      "",
+      "const ${1/(.*)/${1:/capitalize}/}Context = React.createContext()",
+      "",
+      "function ${1/(.*)/${1:/capitalize}/}Provider({ children }) {",
+      "  const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($0)",
+      "  const value = { $1, set${1/(.*)/${1:/capitalize}/} }",
+      "  return <${1/(.*)/${1:/capitalize}/}Context.Provider value={value}>{children}</${1/(.*)/${1:/capitalize}/}Context.Provider>",
+      "}",
+      "export { ${1/(.*)/${1:/capitalize}/}Provider }"
+    ],
+    "description": "Create React Context Provider"
+  },
+  "contextProviderWithHook": {
+    "prefix": "rcphook",
+    "body": [
+      "import React, { useState } from 'react'",
+      "",
+      "const ${1/(.*)/${1:/capitalize}/}Context = React.createContext()",
+      "",
+      "function ${1/(.*)/${1:/capitalize}/}Provider({ children }) {",
+      "  const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($0)",
+      "  const value = { $1, set${1/(.*)/${1:/capitalize}/} }",
+      "  return <${1/(.*)/${1:/capitalize}/}Context.Provider value={value}>{children}</${1/(.*)/${1:/capitalize}/}Context.Provider>",
+      "}",
+      "",
+      "function use${1/(.*)/${1:/capitalize}/}() {",
+      "  const context = React.useContext(${1/(.*)/${1:/capitalize}/}Context)",
+      "  if (context === undefined) {",
+      "    throw new Error('use${1/(.*)/${1:/capitalize}/} must be used within a ${1/(.*)/${1:/capitalize}/}Provider')",
+      "  }",
+      "  return context",
+      "}",
+      "export { ${1/(.*)/${1:/capitalize}/}Provider, use${1/(.*)/${1:/capitalize}/} }"
+    ],
+    "description": "Create React Context Provider with custom useContext Hook"
+  },
   "createRef": {
     "prefix": "cref",
     "body": ["this.${1:refName}Ref = React.createRef()", ""],
@@ -1480,6 +1584,68 @@
       "}, [${3:input}])"
     ]
   },
+  "useEffectFetch": {
+    "prefix": "fet",
+    "body": [
+      "useEffect(() => {",
+      "  const url = '$0'",
+      "  fetch(url)",
+      "    .then((res) => res.json())",
+      "    .then((json) => {",
+      "      console.log(json)",
+      "    })",
+      "}, [])"
+    ],
+    "description": "Create a data fetching React effect"
+  },
+  "useEffectFetchAwait": {
+    "prefix": "feta",
+    "body": [
+      "useEffect(() => {",
+      "  const url = '$0'",
+      "  async function fetchApi() {",
+      "    const res = await fetch(url)",
+      "    const json = await res.json()",
+      "    console.log(json)",
+      "  }",
+      "  fetchApi()",
+      "}, [])"
+    ],
+    "description": "Create a data fetching React effect (await syntax)"
+  },
+  "useEffectFetchWithState": {
+    "prefix": "fets",
+    "body": [
+      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($2)",
+      "",
+      "useEffect(() => {",
+      "  const url = '$0'",
+      "  fetch(url)",
+      "    .then((res) => res.json())",
+      "    .then((json) => {",
+      "      set${1/(.*)/${1:/capitalize}/}(json)",
+      "    })",
+      "}, [])"
+    ],
+    "description": "Create a data fetching React effect with state"
+  },
+  "useEffectFetchAwaitWithState": {
+    "prefix": "fetas",
+    "body": [
+      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($2)",
+      "",
+      "useEffect(() => {",
+      "  const url = '$0'",
+      "  async function fetch${1/(.*)/${1:/capitalize}/}() {",
+      "    const res = await fetch(url)",
+      "    const json = await res.json()",
+      "    set${1/(.*)/${1:/capitalize}/}(json)",
+      "  }",
+      "  fetch${1/(.*)/${1:/capitalize}/}()",
+      "}, [])"
+    ],
+    "description": "Create a data fetching React effect (await syntax) with state"
+  },
   "useContext": {
     "prefix": "useContext",
     "body": ["const ${1:context} = useContext(${2:contextValue})"]
@@ -1859,7 +2025,7 @@
       "}",
       "",
       "export default ${1:${TM_FILENAME_BASE}}"
-     ],
-     "description": "Creates a React Custom Hook with ES7 module system"
-   }
+    ],
+    "description": "Creates a React Custom Hook with ES7 module system"
+  }
 }