{"id":4789,"date":"2026-05-15T22:25:32","date_gmt":"2026-05-15T16:55:32","guid":{"rendered":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/"},"modified":"2026-05-15T22:25:32","modified_gmt":"2026-05-15T16:55:32","slug":"10-react-best-practices-for-clean-and-scalable-code","status":"publish","type":"post","link":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/","title":{"rendered":"10 React Best Practices for Clean and Scalable Code"},"content":{"rendered":"<p>text<br \/>\n$ node &#8211;version<br \/>\nv20.11.0<br \/>\n$ npm audit<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a07a72b83501\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a07a72b83501\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#npm_audit_report\" >npm audit report<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#TO_Engineering_Management_Frontend_%E2%80%9CArchitects%E2%80%9D\" >TO: Engineering Management, Frontend &#8220;Architects&#8221;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#FROM_Senior_Systems_Architect_Infrastructure_Core_R_D\" >FROM: Senior Systems Architect (Infrastructure &amp; Core R&amp;D)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#SUBJECT_Technical_Audit_of_Project_REDACTED_%E2%80%93_A_Sinking_Ship\" >SUBJECT: Technical Audit of Project [REDACTED] \u2013 A Sinking Ship<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#1_The_useEffect_Death_Spiral_Stop_Cooking_the_Users_CPU\" >1. The useEffect Death Spiral: Stop Cooking the User\u2019s CPU<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#2_Context_API_The_Lazy_Mans_Global_Variable\" >2. Context API: The Lazy Man\u2019s Global Variable<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#3_Cargo_Cult_Memoization_Profiler_or_It_Didnt_Happen\" >3. Cargo Cult Memoization: Profiler or It Didn&#8217;t Happen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#4_The_400kb_Bundle_Crisis_Tree-Shaking_and_Structural_Integrity\" >4. The 400kb Bundle Crisis: Tree-Shaking and Structural Integrity<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#5_Prop-Drilling_vs_Composition_The_Plumbing_Problem\" >5. Prop-Drilling vs. Composition: The Plumbing Problem<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#6_The_Dependency_Landfill_npm_install_is_Not_a_Strategy\" >6. The Dependency Landfill: npm install is Not a Strategy<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#The_Path_Forward\" >The Path Forward<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#Related_Articles\" >Related Articles<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"npm_audit_report\"><\/span>npm audit report<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>cross-fetch  &lt;3.1.8<br \/>\nSeverity: high<br \/>\nRegular Expression Denial of Service &#8211; https:\/\/github.com\/advisories\/GHSA-7gc6-9fqp-82jj<br \/>\nfix available via <code>npm install cross-fetch@4.0.0<\/code><br \/>\nnode_modules\/cross-fetch<\/p>\n<p>128 vulnerabilities (42 high, 12 critical)<\/p>\n<p>$ vite build<br \/>\n&#8230;<br \/>\n&lt;&#8212; Last few GCs &#8212;&gt;<br \/>\n[14022:0x65c2e00]    15232 ms: Mark-sweep 2032.4 (2048.5) -&gt; 2031.1 (2048.5) MB, 1120.4 \/ 0.0 ms  (average mutation fixed under 10% [last 5 GCs]) allocation failure; last resort GC in old space requested<br \/>\n[14022:0x65c2e00]    16340 ms: Mark-sweep 2031.1 (2048.5) -&gt; 2031.1 (2048.5) MB, 1108.2 \/ 0.0 ms  (average mutation fixed under 10% [last 5 GCs]) allocation failure; last resort GC in old space requested<\/p>\n<p>FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed &#8211; JavaScript heap out of memory<br \/>\n 1: 0xb83f70 node::Abort() [node]<br \/>\n 2: 0xa9490e  [node]<br \/>\n 3: 0xd63f20 v8::Utils::ReportOOMFailure(v8::internal::Isolate<em>, char const<\/em>, bool) [node]<br \/>\n 4: 0xd642c7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate<em>, char const<\/em>, bool) [node]<br \/>\n 5: 0xf419f5  [node]<br \/>\n 6: 0xf42bdc v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]<br \/>\n 7: 0xf526a5 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]<br \/>\n 8: 0xf53510 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]<br \/>\n 9: 0xf2db4e v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]<br \/>\n10: 0xf2dbd7 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]<br \/>\n&#8220;`<\/p>\n<hr \/>\n<h3><span class=\"ez-toc-section\" id=\"TO_Engineering_Management_Frontend_%E2%80%9CArchitects%E2%80%9D\"><\/span>TO: Engineering Management, Frontend &#8220;Architects&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"FROM_Senior_Systems_Architect_Infrastructure_Core_R_D\"><\/span>FROM: Senior Systems Architect (Infrastructure &amp; Core R&amp;D)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"SUBJECT_Technical_Audit_of_Project_REDACTED_%E2%80%93_A_Sinking_Ship\"><\/span>SUBJECT: Technical Audit of Project [REDACTED] \u2013 A Sinking Ship<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>I spent twenty years in the trenches of C++ writing memory-mapped I\/O drivers and high-frequency trading engines where every byte was a liability. I have now spent forty-eight hours looking at your React 18.2.0 codebase. I feel like a structural engineer being asked to repair a skyscraper built out of wet cardboard and prayer.<\/p>\n<p>The terminal log above isn&#8217;t a &#8220;glitch.&#8221; It is the sound of your application\u2019s engine seizing because you\u2019ve filled the crankcase with sludge. You are running Node 20.11.0, a modern LTS release, and you are still managing to blow the 2GB default heap limit during a production build. That takes effort. That takes a fundamental misunderstanding of how memory allocation and dependency trees work.<\/p>\n<p>You\u2019ve treated Vite 5.0.0 like a magic wand that excuses you from understanding the build pipeline. It isn&#8217;t. Your &#8220;development environment&#8221; is a house of cards, and the wind is picking up. <\/p>\n<p>Here is the cleanup manifesto. Read it. Implement it. Or find another profession.<\/p>\n<hr \/>\n<h2><span class=\"ez-toc-section\" id=\"1_The_useEffect_Death_Spiral_Stop_Cooking_the_Users_CPU\"><\/span>1. The <code>useEffect<\/code> Death Spiral: Stop Cooking the User\u2019s CPU<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In C++, if I wrote a loop that triggered its own exit condition to reset, I\u2019d be fired before the binary finished linking. In your React code, you treat <code>useEffect<\/code> like a catch-all bucket for &#8220;stuff that should happen sometimes.&#8221; <\/p>\n<p>I see components where a <code>useEffect<\/code> updates a state variable, which is then passed as a prop to a child, which triggers a callback, which updates the original state, triggering the effect again. You aren&#8217;t building a UI; you\u2019re building a distributed denial-of-service attack against the user\u2019s browser. <\/p>\n<p>The <strong>react best<\/strong> way to handle <code>useEffect<\/code> is to not use it. If you can calculate a value during render, calculate it during render. If you are transforming data from props, do it in the function body. If you are handling a user event, put the logic in the event handler. <\/p>\n<p>The dependency array is not a suggestion. It is a set of pointers. When you pass an object literal or an anonymous array into that dependency list, React performs a shallow comparison. Every time the parent re-renders, that object gets a new memory address. React sees a &#8220;change,&#8221; fires the effect, and the cycle repeats. You are thrashing the V8 garbage collector until it gives up and dies. <\/p>\n<p><strong>Directive:<\/strong> Every <code>useEffect<\/code> in this project must be audited. If it doesn&#8217;t have a specific, primitive-driven dependency array, it is a bug. If it\u2019s being used to sync two states, it\u2019s a design failure.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Context_API_The_Lazy_Mans_Global_Variable\"><\/span>2. Context API: The Lazy Man\u2019s Global Variable<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You\u2019ve discovered <code>useContext<\/code> and decided that prop-drilling is &#8220;too hard.&#8221; So, you\u2019ve wrapped the entire application in a single, massive <code>GlobalProvider<\/code>. <\/p>\n<p>This is the architectural equivalent of using a single global <code>void*<\/code> pointer in C to store your entire heap. It\u2019s lazy, it\u2019s dangerous, and it\u2019s killing performance. Every time you update a single boolean\u2014like <code>isSidebarOpen<\/code>\u2014at the top level of your Context, every single component subscribed to that context re-renders. <\/p>\n<p>React 18.2.0\u2019s reconciliation engine is fast, but it\u2019s not magic. When you force a re-render of 400 components because a user clicked a toggle, you are wasting cycles. You are forcing the browser to rebuild the virtual DOM tree, diff it, and patch the real DOM for no reason.<\/p>\n<p>The <strong>react best<\/strong> way to manage state is to keep it as local as possible. If only two components need a piece of data, lift the state to their immediate common ancestor. If you absolutely need global state, use a library designed for atomic updates or split your Contexts into small, specialized providers. A <code>ThemeContext<\/code> should not be in the same provider as your <code>UserAuthContext<\/code>. <\/p>\n<p><strong>Directive:<\/strong> Break the <code>GlobalProvider<\/code> into five specific domains. Any component using <code>useContext<\/code> must be profiled to ensure it isn&#8217;t re-rendering more than once per user action.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Cargo_Cult_Memoization_Profiler_or_It_Didnt_Happen\"><\/span>3. Cargo Cult Memoization: Profiler or It Didn&#8217;t Happen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>I see <code>useMemo<\/code> and <code>useCallback<\/code> sprinkled everywhere like holy water. This is cargo cult programming. You\u2019re adding the overhead of dependency tracking and memory allocation for memoization caches to functions that take 0.02ms to execute. <\/p>\n<p>Memoization is not free. You are trading memory for CPU cycles. In a system where you are already hitting heap limits, adding more cached objects is like trying to put out a fire with gasoline. <\/p>\n<p>You use <code>useMemo<\/code> when you have a computationally expensive operation\u2014like sorting a 5,000-row array or performing complex regex on a large string. You do not use it to memoize a string concatenation. <\/p>\n<p>The <strong>react best<\/strong> approach to memoization is to leave it out until the React DevTools Profiler shows a bottleneck. If a component re-renders in under 16ms (the window for 60fps), you don&#8217;t need to memoize it. You are complicating the code and making it harder to debug for a performance gain that is literally invisible to the human eye.<\/p>\n<p><strong>Directive:<\/strong> Remove all <code>useMemo<\/code> and <code>useCallback<\/code> hooks that were added &#8220;just in case.&#8221; If you can&#8217;t show me a flame graph proving that a function is a bottleneck, the hook is deleted.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_The_400kb_Bundle_Crisis_Tree-Shaking_and_Structural_Integrity\"><\/span>4. The 400kb Bundle Crisis: Tree-Shaking and Structural Integrity<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Your production JS bundle is 1.2MB. After Gzip, it\u2019s still 400kb. On a 3G connection, your app takes 8 seconds to become interactive. This is unacceptable. This is a failure of basic engineering.<\/p>\n<p>Vite 5.0.0 uses Rollup under the hood. Rollup is good at tree-shaking, but it can\u2019t shake what you\u2019ve bolted down. You are importing entire icon libraries (<code>import { * } from 'huge-icon-lib'<\/code>) just to use a single &#8220;ChevronDown&#8221; icon. You are importing heavy utility libraries like Moment.js when the native <code>Intl<\/code> object in modern browsers\u2014and certainly in Node 20.11.0\u2014does the job better and for zero bytes.<\/p>\n<p>The <strong>react best<\/strong> methods for code-splitting involve <code>React.lazy<\/code> and dynamic <code>import()<\/code> statements. Your &#8220;Admin Dashboard&#8221; should not be loaded when a user is on the &#8220;Login&#8221; page. You are forcing the user to download the plumbing for the entire building when they\u2019re just standing in the foyer.<\/p>\n<p><strong>Directive:<\/strong> Implement route-based code splitting immediately. Audit the <code>package.json<\/code>. Any library over 20kb must be justified in writing or replaced with a lighter alternative. If I see <code>lodash<\/code> imported without cherry-picking, someone is getting a formal warning.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_Prop-Drilling_vs_Composition_The_Plumbing_Problem\"><\/span>5. Prop-Drilling vs. Composition: The Plumbing Problem<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You\u2019ve complained that prop-drilling is &#8220;messy.&#8221; So you use Context (see point 2) or you create &#8220;God Components&#8221; that take 50 props and pass them down. <\/p>\n<p>In C++, we have the principle of Dependency Inversion. In React, we have Component Composition. Instead of passing <code>userAvatarUrl<\/code> through six layers of navigation components, pass the <code>Avatar<\/code> component itself as a child or a prop. <\/p>\n<p>The current architecture is a series of leaky pipes. You\u2019re passing data through components that don&#8217;t care about it, just to get it to a component that does. This makes the intermediate components impossible to test in isolation and forces them to re-render whenever the data changes, even if they don&#8217;t use it.<\/p>\n<p>The <strong>react best<\/strong> way to structure a tree is to use composition to keep components decoupled. If a component doesn&#8217;t need to know about the data, it shouldn&#8217;t see the data. This isn&#8217;t just about &#8220;clean code&#8221;; it&#8217;s about reducing the surface area of your bugs.<\/p>\n<p><strong>Directive:<\/strong> Refactor the <code>Navigation<\/code> and <code>Sidebar<\/code> hierarchies. Use <code>children<\/code> props to inject content rather than passing data through the &#8220;pipes&#8221; of the layout.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"6_The_Dependency_Landfill_npm_install_is_Not_a_Strategy\"><\/span>6. The Dependency Landfill: <code>npm install<\/code> is Not a Strategy<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Your <code>node_modules<\/code> folder is 1.4GB. You have three different CSS-in-JS libraries, two different state management wrappers, and a dozen &#8220;utility&#8221; packages that consist of five lines of code you could have written yourself.<\/p>\n<p>Every dependency you add is a security risk (see the 128 vulnerabilities in your audit), a build-time bottleneck, and a potential runtime failure point. You are building on shifting sand. When one of these &#8220;micro-packages&#8221; gets deprecated or hijacked, your entire project goes dark.<\/p>\n<p>We are using Vite 5.0.0. It is fast because it leverages ES modules. But it can&#8217;t save you from a dependency graph that looks like a bowl of spaghetti. You have circular dependencies in your internal modules that are making the HMR (Hot Module Replacement) fail, forcing a full page reload every time you change a CSS class.<\/p>\n<p><strong>Directive:<\/strong> No new dependencies without a peer review. We are moving to a &#8220;Zero-Dependency&#8221; mindset for utility functions. If you need to format a date, use the language features. If you need a debounced function, write the ten lines of code.<\/p>\n<hr \/>\n<h3><span class=\"ez-toc-section\" id=\"The_Path_Forward\"><\/span>The Path Forward<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This project is currently a liability. It is slow, it is bloated, and it is unmaintainable. We are not &#8220;delivering features&#8221; anymore. We are &#8220;recovering technical debt&#8221; until the system is stable.<\/p>\n<p>I don&#8217;t care about your &#8220;vibe&#8221; or your &#8220;developer experience.&#8221; I care about the fact that the heap is overflowing and the user&#8217;s fans are spinning up to max speed because you don&#8217;t know how to manage a dependency array. <\/p>\n<p>You will start by fixing the <code>useEffect<\/code> loops. Then you will dismantle the <code>GlobalProvider<\/code>. Then you will prune the <code>node_modules<\/code> landfill. <\/p>\n<p>I will be monitoring the build logs. If I see another <code>JavaScript heap out of memory<\/code> error, I will start deleting components alphabetically until the build passes.<\/p>\n<p>Get to work.<\/p>\n<p><strong>ARCHITECT&#8217;S DIRECTIVE:<\/strong><br \/>\n1. Audit all 42 high-severity vulnerabilities by EOD.<br \/>\n2. Implement <code>React.lazy<\/code> on all top-level routes.<br \/>\n3. Remove <code>useMemo<\/code> from any function not processing more than 1,000 elements.<br \/>\n4. Replace all &#8220;God Contexts&#8221; with localized state or atomic providers.<\/p>\n<p>No excuses. The hardware doesn&#8217;t lie. Your code is failing the machine. Fix the code.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Related_Articles\"><\/span>Related Articles<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Explore more insights and best practices:<\/p>\n<ul>\n<li><a href=\"https:\/\/itsupportwale.com\/blog\/microsoft-launcher-preview-6-0-arrives-with-more-features\/\">Microsoft Launcher Preview 6 0 Arrives With More Features<\/a><\/li>\n<li><a href=\"https:\/\/itsupportwale.com\/blog\/how-to-increase-migration-speed-in-office-365\/\">How To Increase Migration Speed In Office 365<\/a><\/li>\n<li><a href=\"https:\/\/itsupportwale.com\/blog\/what-is-kubernetes-a-simple-guide-to-container-orchestration\/\">What Is Kubernetes A Simple Guide To Container Orchestration<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>text $ node &#8211;version v20.11.0 $ npm audit npm audit report cross-fetch &lt;3.1.8 Severity: high Regular Expression Denial of Service &#8211; https:\/\/github.com\/advisories\/GHSA-7gc6-9fqp-82jj fix available via npm install cross-fetch@4.0.0 node_modules\/cross-fetch 128 vulnerabilities (42 high, 12 critical) $ vite build &#8230; &lt;&#8212; Last few GCs &#8212;&gt; [14022:0x65c2e00] 15232 ms: Mark-sweep 2032.4 (2048.5) -&gt; 2031.1 (2048.5) MB, 1120.4 &#8230; <a title=\"10 React Best Practices for Clean and Scalable Code\" class=\"read-more\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/\" aria-label=\"Read more  on 10 React Best Practices for Clean and Scalable Code\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4789","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>10 React Best Practices for Clean and Scalable Code - ITSupportWale<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 React Best Practices for Clean and Scalable Code - ITSupportWale\" \/>\n<meta property=\"og:description\" content=\"text $ node &#8211;version v20.11.0 $ npm audit npm audit report cross-fetch &lt;3.1.8 Severity: high Regular Expression Denial of Service &#8211; https:\/\/github.com\/advisories\/GHSA-7gc6-9fqp-82jj fix available via npm install cross-fetch@4.0.0 node_modules\/cross-fetch 128 vulnerabilities (42 high, 12 critical) $ vite build &#8230; &lt;&#8212; Last few GCs &#8212;&gt; [14022:0x65c2e00] 15232 ms: Mark-sweep 2032.4 (2048.5) -&gt; 2031.1 (2048.5) MB, 1120.4 ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/\" \/>\n<meta property=\"og:site_name\" content=\"ITSupportWale\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Itsupportwale-298547177495978\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-15T16:55:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2021\/05\/android-chrome-512x512-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Techie\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Techie\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/\"},\"author\":{\"name\":\"Techie\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/#\/schema\/person\/8c5a2b3d36396e0a8fd91ec8242fd46d\"},\"headline\":\"10 React Best Practices for Clean and Scalable Code\",\"datePublished\":\"2026-05-15T16:55:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/\"},\"wordCount\":1843,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/\",\"url\":\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/\",\"name\":\"10 React Best Practices for Clean and Scalable Code - ITSupportWale\",\"isPartOf\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/#website\"},\"datePublished\":\"2026-05-15T16:55:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/itsupportwale.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 React Best Practices for Clean and Scalable Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/#website\",\"url\":\"https:\/\/itsupportwale.com\/blog\/\",\"name\":\"ITSupportWale\",\"description\":\"Tips, Tricks, Fixed-Errors, Tutorials &amp; Guides\",\"publisher\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/itsupportwale.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/#organization\",\"name\":\"itsupportwale\",\"url\":\"https:\/\/itsupportwale.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2023\/09\/cropped-Logo-trans-without-slogan.png\",\"contentUrl\":\"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2023\/09\/cropped-Logo-trans-without-slogan.png\",\"width\":1119,\"height\":144,\"caption\":\"itsupportwale\"},\"image\":{\"@id\":\"https:\/\/itsupportwale.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Itsupportwale-298547177495978\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/itsupportwale.com\/blog\/#\/schema\/person\/8c5a2b3d36396e0a8fd91ec8242fd46d\",\"name\":\"Techie\",\"sameAs\":[\"https:\/\/itsupportwale.com\",\"iswblogadmin\"],\"url\":\"https:\/\/itsupportwale.com\/blog\/author\/iswblogadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"10 React Best Practices for Clean and Scalable Code - ITSupportWale","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/","og_locale":"en_US","og_type":"article","og_title":"10 React Best Practices for Clean and Scalable Code - ITSupportWale","og_description":"text $ node &#8211;version v20.11.0 $ npm audit npm audit report cross-fetch &lt;3.1.8 Severity: high Regular Expression Denial of Service &#8211; https:\/\/github.com\/advisories\/GHSA-7gc6-9fqp-82jj fix available via npm install cross-fetch@4.0.0 node_modules\/cross-fetch 128 vulnerabilities (42 high, 12 critical) $ vite build &#8230; &lt;&#8212; Last few GCs &#8212;&gt; [14022:0x65c2e00] 15232 ms: Mark-sweep 2032.4 (2048.5) -&gt; 2031.1 (2048.5) MB, 1120.4 ... Read more","og_url":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/","og_site_name":"ITSupportWale","article_publisher":"https:\/\/www.facebook.com\/Itsupportwale-298547177495978","article_published_time":"2026-05-15T16:55:32+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2021\/05\/android-chrome-512x512-1.png","type":"image\/png"}],"author":"Techie","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Techie","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#article","isPartOf":{"@id":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/"},"author":{"name":"Techie","@id":"https:\/\/itsupportwale.com\/blog\/#\/schema\/person\/8c5a2b3d36396e0a8fd91ec8242fd46d"},"headline":"10 React Best Practices for Clean and Scalable Code","datePublished":"2026-05-15T16:55:32+00:00","mainEntityOfPage":{"@id":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/"},"wordCount":1843,"commentCount":0,"publisher":{"@id":"https:\/\/itsupportwale.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/","url":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/","name":"10 React Best Practices for Clean and Scalable Code - ITSupportWale","isPartOf":{"@id":"https:\/\/itsupportwale.com\/blog\/#website"},"datePublished":"2026-05-15T16:55:32+00:00","breadcrumb":{"@id":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/itsupportwale.com\/blog\/10-react-best-practices-for-clean-and-scalable-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/itsupportwale.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 React Best Practices for Clean and Scalable Code"}]},{"@type":"WebSite","@id":"https:\/\/itsupportwale.com\/blog\/#website","url":"https:\/\/itsupportwale.com\/blog\/","name":"ITSupportWale","description":"Tips, Tricks, Fixed-Errors, Tutorials &amp; Guides","publisher":{"@id":"https:\/\/itsupportwale.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itsupportwale.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/itsupportwale.com\/blog\/#organization","name":"itsupportwale","url":"https:\/\/itsupportwale.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/itsupportwale.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2023\/09\/cropped-Logo-trans-without-slogan.png","contentUrl":"https:\/\/itsupportwale.com\/blog\/wp-content\/uploads\/2023\/09\/cropped-Logo-trans-without-slogan.png","width":1119,"height":144,"caption":"itsupportwale"},"image":{"@id":"https:\/\/itsupportwale.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Itsupportwale-298547177495978"]},{"@type":"Person","@id":"https:\/\/itsupportwale.com\/blog\/#\/schema\/person\/8c5a2b3d36396e0a8fd91ec8242fd46d","name":"Techie","sameAs":["https:\/\/itsupportwale.com","iswblogadmin"],"url":"https:\/\/itsupportwale.com\/blog\/author\/iswblogadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/posts\/4789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/comments?post=4789"}],"version-history":[{"count":0,"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/posts\/4789\/revisions"}],"wp:attachment":[{"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/media?parent=4789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/categories?post=4789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itsupportwale.com\/blog\/wp-json\/wp\/v2\/tags?post=4789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}