React 18 Snippets - I need your help ❤️
Tags: react, javascript, programming, kristiyanvelkov
Published: 2023-06-07 13:23:41

Hello, folks. 

I'm thrilled to announce that I've developed a fantastic new VS Code extension called **React 18 Snippets.** It's designed to greatly enhance your productivity and save you valuable time.❤️

I saw many snippets for React, but they don't support new features in React 18, so I decide to create my own and to share it to the public. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7ddsb8ikomupdqkt9to.gif)

---
### HELP
**This VS code extension is for you guys. Please, support! ❤️**

So, to be able to improve the extension, please: 

1. Download it from VS code workspace [Link](https://marketplace.visualstudio.com/items?itemName=KristiyanVelkov.react-18-snippets) or directly in VS code. 😊 
2. If you find something that can be improved, comment here.💪 
3. If you want to join as a contributor, please contact me.🔥 

Don't forget to add a review if you like the extension [LINK](https://marketplace.visualstudio.com/items?itemName=KristiyanVelkov.react-18-snippets&ssr=false#review-details)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xfbewprpavvsjad4zlk.png)


---

### List of snippets for React JS version 18 

| Snippet            | Renders                               |
| ------------------ | ------------------------------------- |
| `ri`               | Import React                          |
| `ridom Import`     | ReactDOM                              |
| `riustate`         | Import React, { useState }            |
| `riustateueffect`  | Import React, { useState, useEffect } |
| `riprototype`      | Import PropTypes                      |
| `rfc`              | Functional Component                  |
| `rafc`             | Arrow Functional Component            |
| `rcustomhook`      | Custom Hook                           |
| `racustomhook`     | Custom Hook (Arrow)                   |
| `rueffect`         | useEffect Hook                        |
| `rustate`          | useState Hook                         |
| `rucontext`        | useContext Hook                       |
| `ruref`            | useRef Hook                           |
| `rumemo`           | useMemo Hook                          |
| `rucallback`       | useCallback Hook                      |
| `rudebugvalue`     | useDebugValue Hook                    |
| `rudeferredvalue`  | useDeferredValue Hook                 |
| `ruid`             | useId Hook                            |
| `rulayouteffect`   | useLayoutEffect Hook                  |
| `rureducer`        | useReducer Hook                       |
| `rutransition`     | useTransition Hook                    |
| `rrender`          | render                                |
| `rfragment`        | Fragment                              |
| `rfragmentkey`     | Fragment with key prop                |
| `rprofiler`        | Profiler                              |
| `rstrict`          | StrictMode                            |
| `rsuspense`        | Suspense                              |
| `rforwardref`      | forwardRef                            |
| `rlazy`            | lazy                                  |
| `rstartTransition` | startTransition                       |
| `rmemo`            | memo                                  |
| `rroot`            | Create Root                           |
| `rhandle`          | handle function                       |
| `rahandle`         | handle arrow function                 |
| `rcontextprovider` | Context Provider                      |

---

## Developer Support:❤️

- If you saw some issue/bug 🐛 related to the specific release version.
- If you want some new feature or change to be added/implemented. 😊

Please, contact the creator of the **React 18 Snippets**, so he will be able to fix or improve it:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2zcidciydse9dofz4fs.png)

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/kristiyan-velkov-763130b3/)

[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://github.com/christiyan14)

<a href="https://revolut.me/kristiyanvelkov" target="_blank">
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxmsw2d2ooukhdg8x5ar.png)
</a>

## Support my work

If you like my work and want to support me to work hard, please donate via:

<a href="https://revolut.me/kristiyanvelkov" title="Link to Revolut">Revolut website payment</a> or use the QR code above.                                                                                                                           


**Thanks a bunch for supporting me! It means a LOT 😍**


---