{"tag":{"id":"56744723958ef13879b95434","name":"React","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513321478077/ByCWNxZMf.png","slug":"reactjs","tagline":"React is a JavaScript library for building user interfaces.","__typename":"Tag"},"publication":{"__typename":"Publication","id":"5ebd7c02acf8911d7951ed49","url":"https://lo-victoria.com","canonicalURL":"https://lo-victoria.com","urlPattern":"SIMPLE","title":"Articles by Victoria Lo","displayTitle":"Blogging and Web Development | Articles by Victoria Lo","hasBadges":true,"descriptionSEO":"Providing beginner-friendly tutorials for new programmers on JavaScript, React, Blogging, Software Development, Web Development and more!","about":{"html":"

I'm a solutions engineer, writer, speaker, GitHub Star and WomenWhoCode evangelist. But TLDR: I'm just a nerd who loves to build projects and share valuable tips for new programmers on this blog.

\n","__typename":"Content"},"features":{"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":false,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":false,"__typename":"ReadTimeFeature"},"audioBlog":{"isEnabled":true,"voiceType":"FEMALE","__typename":"AudioBlogFeature"},"textSelectionSharer":{"isEnabled":true,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":false,"published":{"__typename":"CustomCSS","homeMinified":"a{font-weight:300}.dark #__next>div>div:nth-child(2)>div>div>div>div.w-full.md\\:flex-1>div.flex.flex-row.flex-wrap.items-center.mb-2.justify-between>h3>a{color:white}.blog-posts-wrapper{justify-content:space-between}.blog-author-area{max-height:0;overflow:hidden;animation:slideIn;animation-fill-mode:forwards;animation-duration:2s;margin-bottom:2.5rem}@keyframes slideIn{0%{max-height:0}100%{max-height:200px}}.css-jwlm5c{flex-direction:row !important}.css-1uxkh7x{width:auto !important;align-items:flex-start !important;padding-left:3rem}.css-jjmvev{align-items:flex-start !important}.css-5gqbbk{text-align:left !important}.blog-post-card{transition:.6s;width:46% !important;padding:1.2rem !important;background:rgba(255,255,255,0.4);border-radius:12px;border:1px solid rgba(255,255,255,0.18)}.dark .blog-post-card{background:#e3e3e31a}.blog-post-card:hover{box-shadow:0 8px 32px 0 rgb(31 38 135 / 37%)}.dark .blog-post-card:hover{box-shadow:0 8px 32px 0 rgb(255 255 255 / 37%)}.post-cover{border:0}.blog-impressum h3{display:none}","postMinified":".font-bold{font-weight:300}.blog-impressum h3{display:none}#frame-add{height:400px !important}","staticMinified":"#__next>div>div>div>div>h1{font-weight:300}.blog-impressum h3{display:none}"},"draft":{"__typename":"CustomCSS","homeMinified":"a{font-weight:300}.dark #__next>div>div:nth-child(2)>div>div>div>div.w-full.md\\:flex-1>div.flex.flex-row.flex-wrap.items-center.mb-2.justify-between>h3>a{color:white}.blog-posts-wrapper{justify-content:space-between}.blog-author-area{max-height:0;overflow:hidden;animation:slideIn;animation-fill-mode:forwards;animation-duration:2s;margin-bottom:2.5rem}@keyframes slideIn{0%{max-height:0}100%{max-height:200px}}.css-jwlm5c{flex-direction:row !important}.css-1uxkh7x{width:auto !important;align-items:flex-start !important;padding-left:3rem}.css-jjmvev{align-items:flex-start !important}.css-5gqbbk{text-align:left !important}.blog-post-card{transition:.6s;width:46% !important;padding:1.2rem !important;background:rgba(255,255,255,0.4);border-radius:12px;border:1px solid rgba(255,255,255,0.18)}.dark .blog-post-card{background:#e3e3e31a}.blog-post-card:hover{box-shadow:0 8px 32px 0 rgb(31 38 135 / 37%)}.dark .blog-post-card:hover{box-shadow:0 8px 32px 0 rgb(255 255 255 / 37%)}.post-cover{border:0}.blog-impressum h3{display:none}","postMinified":".font-bold{font-weight:300}.blog-impressum h3{display:none}#frame-add{height:400px !important}","staticMinified":"#__next>div>div>div>div>h1{font-weight:300}.blog-impressum h3{display:none}"},"__typename":"CustomCSSFeature"},"__typename":"PublicationFeatures"},"ogMetaData":{"image":"https://cdn.hashnode.com/res/hashnode/image/upload/v1595258065636/tpUb85GJk.png","__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"5ebd7a2dacf8911d7951ed40","name":"Victoria Lo","username":"victoria","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg"},"preferences":{"__typename":"Preferences","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1607028151322/9o8_5ImaK.png","darkMode":{"__typename":"DarkModePreferences","logo":null,"enabled":true},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"604810c1c64c63545921cb9e","label":"About","url":"https://lo-victoria.com/about","priority":100,"type":"page","series":null,"page":{"__typename":"StaticPage","id":"5ec9257fa7a2c43b12377bb0"}},{"__typename":"PublicationNavbarItem","id":"609527b7d2b17b7fc35f30b0","label":"Sponsors","url":"https://lo-victoria.com/sponsor","priority":99,"type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"609275d4b97aec7542ba657d","label":"Blogging","url":"https://lo-victoria.com/series/victorias-blogging-tips","priority":98,"type":"series","series":{"__typename":"Series","id":"5f89bf47d7dc0b17a97a22e7"},"page":null},{"__typename":"PublicationNavbarItem","id":"6048111c7f43655434aaf557","label":"Node.js","url":"https://lo-victoria.com/series/nodejs-rest-api","priority":97,"type":"series","series":{"__typename":"Series","id":"5f105d5261fb3d25a2d43052"},"page":null},{"__typename":"PublicationNavbarItem","id":"60fd1af831552277811ae84d","label":"GraphQL","url":"https://lo-victoria.com/series/graphql","priority":96,"type":"series","series":{"__typename":"Series","id":"6065c83ffad5042228d35d26"},"page":null},{"__typename":"PublicationNavbarItem","id":"61e0ba86d546507ab03419cf","label":"React Hooks","url":"https://lo-victoria.com/series/a-look-at-react-hooks","priority":95,"type":"series","series":{"__typename":"Series","id":"5fcc9d99f9aad2092499a61b"},"page":null},{"__typename":"PublicationNavbarItem","id":"63d1233f79a109e4ff159e58","label":"Resources","url":"https://lo-victoria.com/resources","priority":95,"type":"page","series":null,"page":{"__typename":"StaticPage","id":"6007745c094f2b30301de2ef"}},{"__typename":"PublicationNavbarItem","id":"614c99f4544e242e0c93f097","label":"DevOps","url":"https://lo-victoria.com/devops","priority":94,"type":"page","series":null,"page":{"__typename":"StaticPage","id":"5fcec3143c92041bab27dc08"}},{"__typename":"PublicationNavbarItem","id":"604813afc64c63545921cbee","label":"Read More","url":"https://lo-victoria.com/read-more","priority":93,"type":"page","series":null,"page":{"__typename":"StaticPage","id":"5f4ea95650b5c61ec6ef49cd"}},{"__typename":"PublicationNavbarItem","id":"604632b9d0457f4d5c583408","label":"Nerd Stuff","url":"https://lo-victoria.com/nerd-stuff","priority":0,"type":"page","series":null,"page":{"__typename":"StaticPage","id":"5f13964ea1826244e3d833ef"}}],"enabledPages":{"__typename":"PagesPreferences","badges":false,"newsletter":true,"members":null},"layout":"grid","disableFooterBranding":true},"favicon":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984904615/AvlfZBL8d.jpg","headerColor":"#e3e3e3","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"G-YKLG29H9N6","plausibleAnalyticsEnabled":null,"wmPaymentPointer":"$ilp.uphold.com/BkFEP7ajLX87","umamiWebsiteUUID":"d69a590a-efca-4382-9962-abaf416ca74a","__typename":"PublicationIntegrations"},"imprint":"

GitHub Star Profile ✨ | Featured on Tech Blogs

Check out these other amazing blogs! 🔥

Catalin's Tech | Daily Dev Tips | Greenroots Blog | Idris Olubisi | Marko Denic

\n","postsCount":199,"isTeam":false,"links":{"twitter":"https://twitter.com/lo_victoria2666","instagram":"","github":"https://github.com/victoria-lo","website":"https://lo-victoria.com/","hashnode":"https://hashnode.com/@victoria","youtube":"https://www.youtube.com/channel/UCGrEsNzKfXjuKDTmpv5nTvg","dailydev":"","linkedin":"https://www.linkedin.com/in/victoria2666/","mastodon":"","__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"victoria","domain":{"__typename":"DomainStatus","host":"lo-victoria.com","ready":true},"wwwPrefixedDomain":null},"redirectionRules":[],"sponsorship":{"content":{"html":"

Hi there! 👋 Thanks for checking out this page. If it is okay with you, please read a little longer.

📖 My Story

In 2019, I was an ordinary adult who love programming as a hobby. I never thought of pursuing a career in tech, nor did I think I can ever make it in the industry as a \"self-taught\" programmer.

2020 was a big hit to all of us. I struggled with some health issues and had to take a break. After recovering, I started to freelance as a web developer, mainly helping small local businesses in my community. It was then I realized that what started as a hobby when I was young had turned into passion and deep curiosity in the field.

So I took a leap of faith and switched my career from finance to software/web development. At first, it was really hard to stand out with my resume. As a small freelancer without a formal education in Computer Science, my resume had no substance and impact to potential employers. But it all changed after I started this blog...

🎯 An Eternal Mission

Today, I am still an ordinary adult who love programming. The difference is that I love writing now too! The topics I write vary from technical articles relating to web development to blogging tips to empower new writers.

My purpose of writing on this blog is simple: to help the community and learn new things every day together.

It's always super rewarding to read a comment or post that my article helped inspire someone's motivations, goals and journey, or just made them smile. Providing great value to others is what I consider as the ultimate and eternal mission of this blog.

🔥 Wow! Still here?

Thank you so much for taking your time to read this long page.

I have been writing non-stop on this blog since May 2020. As you know, it takes a lot of concentration, discipline, time management and hard work; so your support would mean a lot to me, as it tells me that I am on the right track.

If you are willing to support my blog and its mission, please consider sponsoring me or buy me a cup of tea 😇~

Also, please feel free to reach out or connect via Twitter, GitHub or LinkedIn.

If you have any questions, my inbox is always open! Shoot an email anytime!

Stay safe and stay tuned for my next articles! Cheers!

Sincerely, a tea-loving nerd 🍵

\n","markdown":"Hi there! 👋 Thanks for checking out this page. If it is okay with you, please read a little longer.\n\n## 📖 My Story\nIn 2019, I was an ordinary adult who love programming as a hobby. I never thought of pursuing a career in tech, nor did I think I can ever make it in the industry as a \"self-taught\" programmer.\n\n2020 was a big hit to all of us. I struggled with some health issues and had to take a break. After recovering, I started to freelance as a web developer, mainly helping small local businesses in my community. It was then I realized that what started as a hobby when I was young had turned into passion and deep curiosity in the field. \n\nSo I took a leap of faith and switched my career from finance to software/web development. At first, it was really hard to stand out with my resume. As a small freelancer without a formal education in Computer Science, my resume had no substance and impact to potential employers. But it all changed after I started this blog...\n\n## 🎯 An Eternal Mission\nToday, I am still an ordinary adult who love programming. The difference is that I love writing now too! The topics I write vary from technical articles relating to web development to blogging tips to empower new writers.\n\nMy purpose of writing on this blog is simple: **to help the community and learn new things every day together.**\n\nIt's always super rewarding to read a comment or post that my article helped inspire someone's motivations, goals and journey, or just made them smile. **Providing great value to others** is what I consider as the ultimate and eternal mission of this blog.\n\n## 🔥 Wow! Still here?\nThank you so much for taking your time to read this long page. \n\nI have been writing non-stop on this blog since May 2020. As you know, it takes a lot of concentration, discipline, time management and hard work; so your support would mean a lot to me, as it tells me that I am on the right track.\n\nIf you are willing to support my blog and its mission, please consider sponsoring me or [buy me a cup of tea](https://www.buymeacoffee.com/victoria2666) 😇~\n\nAlso, please feel free to reach out or connect via [Twitter](https://twitter.com/lo_victoria2666), [GitHub](https://github.com/victoria-lo) or [LinkedIn](https://www.linkedin.com/in/victoria2666/). \n\nIf you have any questions, my inbox is always open! Shoot an [email](mailto:victoria-lo@hotmail.com) anytime!\n\nStay safe and stay tuned for my next articles! Cheers!\n\n\n#### Sincerely, a tea-loving nerd 🍵","__typename":"Content"},"stripe":{"connected":true,"accountId":"acct_1IlvwTGIJcWC5em3","country":"SG","__typename":"StripeConfiguration"},"__typename":"PublicationSponsorship"},"pro":{"hasProAccess":true,"__typename":"PublicationProInfo"},"posts":{"edges":[{"node":{"id":"64edce4ac2ba7cd021dcdf4f","title":"How to Build a Next.Js E-Commerce Website with Medusa","slug":"how-to-build-a-nextjs-e-commerce-website-with-medusa","publishedAt":"2023-08-29T10:54:02.832Z","cuid":"cllw6xpao000309l27da96cjp","url":"https://lo-victoria.com/how-to-build-a-nextjs-e-commerce-website-with-medusa","subtitle":"Introduction to the Medusa Toolkit and how to build a full-stack Next.js e-commerce website with Medusa","brief":"E-commerce solutions have become essential in today's digital era, as they provide businesses with the ability to reach a global audience, streamline operations, and enhance the overall shopping experience for customers.\nIn this article, we’ll learn ...","readTimeInMinutes":7,"views":606,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":19367,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1691418302563/8a39059a-a053-47f0-8453-342cfa963453.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjRlZGNlNGFjMmJhN2NkMDIxZGNkZjRmXzIwMjMtMDgtMjlUMTA6NTQ6MDIuODMyWg==","__typename":"PostEdge"},{"node":{"id":"6479d9e7eafd38ddc2c92b98","title":"A Look At React Hooks: useSyncExternalStore","slug":"a-look-at-react-hooks-usesyncexternalstore","publishedAt":"2023-06-02T12:00:39.283Z","cuid":"clieikebq0h9lyanv1d5yezso","url":"https://lo-victoria.com/a-look-at-react-hooks-usesyncexternalstore","subtitle":"An awesome library Hook to integrate non-React state management in your apps!","brief":"Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's learn about the useSyncExternalStore Hook. It is a useful Hook for when you need to integrate non-React state management in your ap...","readTimeInMinutes":3,"views":1640,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":19367,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1685595602596/1bd44e84-1bc7-45bd-a266-185ebc88d780.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjQ3OWQ5ZTdlYWZkMzhkZGMyYzkyYjk4XzIwMjMtMDYtMDJUMTI6MDA6MzkuMjgzWg==","__typename":"PostEdge"},{"node":{"id":"645e2eca8e9b452175a58b0c","title":"A Look At React Hooks: The New `use` Hook","slug":"a-look-at-react-hooks-the-new-use-hook","publishedAt":"2023-05-12T12:19:22.237Z","cuid":"clhkizksd000509la4x8gabk1","url":"https://lo-victoria.com/a-look-at-react-hooks-the-new-use-hook","subtitle":"A new and life-changing Hook coming soon for React!","brief":"Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's learn about the use Hook. That's right, that's the Hook name.\nNote that this Hook is not yet available officially in React. If you ...","readTimeInMinutes":3,"views":5066,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":19367,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1679453128498/50d52599-0513-46e5-8b87-62d02445710b.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjQ1ZTJlY2E4ZTliNDUyMTc1YTU4YjBjXzIwMjMtMDUtMTJUMTI6MTk6MjIuMjM3Wg==","__typename":"PostEdge"},{"node":{"id":"6393236a855b6005fa6c16c4","title":"A Look at React Hooks: useNavigation","slug":"a-look-at-react-hooks-usenavigation","publishedAt":"2022-12-09T12:00:42.139Z","cuid":"clbggidvp00uj39nvhrxhag5c","url":"https://lo-victoria.com/a-look-at-react-hooks-usenavigation","subtitle":"Handle page navigation and behaviours with useNavigation!","brief":"Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's learn about the useNavigation Hook.\nNote that this Hook is available for both React Native and React projects which uses React Rout...","readTimeInMinutes":4,"views":3042,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":19367,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1670477530254/VSdnGZwpr.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjM5MzIzNmE4NTViNjAwNWZhNmMxNmM0XzIwMjItMTItMDlUMTI6MDA6NDIuMTM5Wg==","__typename":"PostEdge"},{"node":{"id":"6377741f3d2f88d544e2be34","title":"A Look at React Hooks: useRef vs useState","slug":"a-look-at-react-hooks-useref-vs-usestate","publishedAt":"2022-11-18T12:01:35.265Z","cuid":"clamgamu9001g08jecj5yh5ht","url":"https://lo-victoria.com/a-look-at-react-hooks-useref-vs-usestate","subtitle":"Let's learn about the differences between useRef vs useState and uncontrolled vs controlled components!","brief":"When learning about React Hooks, you will probably come across useRef and useState. These two hooks are often used in form handling. In React, there are typically 2 ways to implement forms: Uncontrolled vs Controlled components.\nWelcome to another a...","readTimeInMinutes":3,"views":1982,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":19367,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1667183317824/PeqSM2t7I.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjM3Nzc0MWYzZDJmODhkNTQ0ZTJiZTM0XzIwMjItMTEtMThUMTI6MDE6MzUuMjY1Wg==","__typename":"PostEdge"},{"node":{"id":"635289eae482dec443a318b8","title":"A Look at React Hooks: useParams for Dynamic Routing","slug":"a-look-at-react-hooks-useparams-for-dynamic-routing","publishedAt":"2022-10-21T12:00:42.087Z","cuid":"cl9ifxn6c003aeqnv0rl74zev","url":"https://lo-victoria.com/a-look-at-react-hooks-useparams-for-dynamic-routing","subtitle":"A simple way to implement dynamic routing with this useful Hook!","brief":"Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's look at a simple application of the useParams Hook.\nBefore reading this article, you should know the following:\n\nBasic knowledge of...","readTimeInMinutes":3,"views":10990,"author":{"id":"5ebd7a2dacf8911d7951ed40","username":"victoria","name":"Victoria Lo","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1672984921463/25B4G5fCJ.jpg","followersCount":19367,"__typename":"User"},"coverImage":{"url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1665807463447/9kVSm1ZOG.png","isPortrait":false,"__typename":"PostCoverImage"},"__typename":"Post"},"cursor":"NjM1Mjg5ZWFlNDgyZGVjNDQzYTMxOGI4XzIwMjItMTAtMjFUMTI6MDA6NDIuMDg3Wg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjM1Mjg5ZWFlNDgyZGVjNDQzYTMxOGI4XzIwMjItMTAtMjFUMTI6MDA6NDIuMDg3Wg==","hasNextPage":true,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}