--- title: "Lessons Learned Refactoring a Shopping Cart with React" description: "A hands-on account of refactoring 4,000+ lines of shopping cart code with React, tackling async state management, Callback Hell, and RWD style chaos, while introducing Tailwind and the Context API." canonical_url: "https://blog.markkulab.net/en/post/react-refactor-shopping-cart" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" date_published: "2023-05-19 01:01:03 +0800" category: "Frontend" tags: ["react", "refactor", "context api", "tailwind", "typescript", "shopping cart"] language: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # Lessons Learned Refactoring a Shopping Cart with React ## Introduction At the beginning of this year, we faced a significant challenge: the e-commerce shopping cart checkout flow had persistent issues — causing user complaints, occasional errors, and constant page refreshes. While improving the checkout flow, we took the opportunity to refactor the codebase. The main goal was to re-architect over 4,000 lines of shopping cart code. I had only been working with React for about six months at the time and my knowledge was still limited. Despite that, my team and I successfully refactored the shopping cart page using React. I'd like to share how we approached the various problems and optimized the code along the way. ## Challenges We Faced ### Fixing Async State Issues The original codebase didn't follow a single-source-of-truth pattern for state writes. When multiple objects tried to update state at the same time — or when state was shared between parent and child components — values would get overwritten or go out of sync, making component maintenance increasingly painful. In the new cart, since cart state needs to span multiple component levels, we implemented a Redux-like state manager using [React Context API + useReducer](https://www.cythilya.tw/2023/05/25/implement-redux-by-react-context-api-and-useReducer/) to handle shared state. All state writes are centralized through methods provided by the Context API. This approach: - Handles complex cross-component state. - Eliminates the issue of async writes overwriting each other. ### Calling the Backend API Before Async State Has Settled React's `setState` is asynchronous. We solved this by chaining async return values through Promises using `resolve`, effectively converting async events into a sequential flow. ### Eliminating Nested JS and Callback Hell The original code was full of deeply nested structures and [Callback Hell](http://callbackhell.com/). To address this, we adopted ES6 Promises to simplify async code. We also applied early-return patterns to reduce nesting in conditional logic, making the code far easier to read and maintain. #### Defining a common Promise resolve type ![TypeScript interfaces defining IPromiseResult and IPromiseResultData](https://blog.markkulab.net/content/markku/posts/react-refactor-shopping-cart/images/Y3acLhQ.png) #### Breaking down async operations into individual Promises ![React shopping cart code limiting laptop quantity](https://blog.markkulab.net/content/markku/posts/react-refactor-shopping-cart/images/TbJvMLr.png) #### Chaining results with `.then` keeps the code clean and maintainable ![TypeScript code demonstrating promise chaining for a shopping cart's placeOrder](https://blog.markkulab.net/content/markku/posts/react-refactor-shopping-cart/images/0xB1lg2.png) ### Single Responsibility and Code Extraction Many methods had identical logic duplicated in different places, leading to redundant and messy code. We applied the Single Responsibility Principle and gradually extracted shared logic into dedicated functions. This made the codebase cleaner and much easier to maintain and extend. ### RWD Causing Style Chaos With styled-components, supporting multiple device sizes often meant duplicating component CSS for minor differences — not a great experience to maintain. We introduced Tailwind CSS, which comes with a rich set of responsive selectors that make it easy to apply device-specific styles. It also made UI layout work significantly more efficient. ### Componentizing Shared Elements We noticed many repeated components and methods scattered across the codebase. We abstracted these into reusable units that could be shared anywhere. This reduced the total line count and improved development velocity. React's component-based model really shines here. ## Issues Surfaced After Launch After going live, new problems started appearing. Due to time and resource constraints, we had continued using the existing API — but since its flow was the inverse of what we expected, we discovered some erroneous orders post-launch. To address this, we added logging throughout the checkout and payment flows, and used Seq Alert to monitor error messages. Whenever an error occurred, we got notified immediately via Teams and fixed each issue one by one to eliminate bugs. ![Seq Alerts dashboard displaying multiple error monitoring charts](https://blog.markkulab.net/content/markku/posts/react-refactor-shopping-cart/images/q3nLVAF.png) ![Seq monitoring dashboard displaying event activity, error counts, and event type](https://blog.markkulab.net/content/markku/posts/react-refactor-shopping-cart/images/VqCgyrd.png) ![React JavaScript code for a shopping cart checkout function](https://blog.markkulab.net/content/markku/posts/react-refactor-shopping-cart/images/DVHTtjy.png) ## Reducing Google Maps API Usage The original system had event listeners bound repeatedly. Every time a user entered a postal code, the system would call the Google Maps API multiple times, and events weren't properly cleaned up on unmount. This caused API call counts to spike. After fixing the double-binding and cleaning up event listeners on unmount, we significantly reduced our Google API costs. ## Closing Thoughts Through the steps above, we successfully refactored the shopping cart and resolved the issues we encountered. This half-year of learning and hands-on practice gave me a much deeper understanding of both React and software development in general. I'm looking forward to the next challenge and applying everything I've learned to new projects. The key takeaway from this experience: even when facing an enormous challenge, there's always something to learn and grow from. We discovered how to apply new tools and techniques to solve real problems, and came out with a substantially better codebase. If you're facing a similar challenge, I hope our experience is useful to you. Every challenge is an opportunity to learn. With enough persistence and determination, you can work through it and come out a stronger developer on the other side. --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/react-refactor-shopping-cart) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.