STEP 1 — DEPENDENCY AUDIT Total dependencies: 5 - react: 17.0.2 (major version behind — 18.x is current) - react-dom: 17.0.2 (major version behind, must match react version) - axios: 0.21.1 (major version behind — 1.x is current) - lodash: 4.17.20 (minor/patch behind, check latest 4.x) - moment: 2.29.1 (deprecated — moment.js is in maintenance mode, officially recommends migrating to alternatives) Deprecated package flagged: moment — officially in maintenance mode since 2020, no new features added, security patches only STEP 2 — RISK CLASSIFICATION react + react-dom: 17.0.2 → 18.x Update type: MAJOR Risk: HIGH Reasoning: React 18 introduced concurrent rendering changes, new root API (createRoot vs ReactDOM.render), and StrictMode behavior changes — core framework, high impact if broken axios: 0.21.1 → 1.x Update type: MAJOR Risk: MEDIUM Reasoning: Axios 1.0 had some breaking changes but generally smaller surface area than a UI framework — moderate risk lodash: 4.17.20 → latest 4.x Update type: PATCH/MINOR (within same major version) Risk: LOW Reasoning: Staying within 4.x major version, unlikely breaking changes moment: 2.29.1 → latest 2.x OR migrate away Update type: Consider replacement, not just version bump Risk: LOW to update within 2.x, but STRATEGIC concern long-term Reasoning: Package is deprecated — updating the version doesn't fix the underlying concern of using an unmaintained-for-new-features library STEP 3 — BREAKING CHANGES ANALYSIS REACT 17 → 18 (verify against official React 18 upgrade guide): Common pattern - Root API change: Old (React 17): ```javascript import ReactDOM from 'react-dom'; ReactDOM.render(<App />, document.getElementById('root')); ``` New (React 18): ```javascript import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); ``` Also check: Automatic batching behavior changes, StrictMode now double-invokes effects in development, useEffect cleanup timing changes. ⚠️ Verify exact changes at: official React 18 upgrade guide (react.dev) since this covers general patterns, not every edge case. AXIOS 0.x → 1.x (verify against official axios changelog): Common pattern - error handling: Old (0.x): ```javascript axios.get(url).catch(error => { console.log(error.response.status); }); ``` New (1.x) - generally similar, but check for: - TypeScript type changes if using TS - Some config option renames - Node.js minimum version requirement may have increased ⚠️ Verify exact changes at official axios GitHub releases/changelog. STEP 4 — UPGRADE SEQUENCE PLAN PHASE 1 — LOW RISK (do first): Package: lodash Command: npm update lodash What to test: Run existing test suite, spot-check any lodash function usage in critical paths PHASE 2 — MEDIUM RISK: Package: axios Command: npm install axios@latest What to test: All API call sites, especially error handling blocks and any custom axios config/interceptors PHASE 3 — HIGH RISK (isolated, one at a time): Package: react + react-dom together Command: npm install react@latest react-dom@latest What to test: - Full app render (does it even boot?) - All component lifecycle behavior - StrictMode double-render issues in development - Any direct ReactDOM.render calls need migration to createRoot STRATEGIC ITEM (separate from version upgrade): moment.js — consider planning migration to date-fns or dayjs as a separate project, not just a version bump. This is a "replace" decision, not an "upgrade" decision. STEP 5 — MIGRATION CODE CHANGES For React 18 specifically, find and update: ```javascript // Search your codebase for: ReactDOM.render( // Replace pattern with: ReactDOM.createRoot(container).render( ``` Note: Exact number of places this appears depends on your codebase structure — search for all ReactDOM.render calls, typically just in your entry file (index.js/main.jsx) unless you have multiple render roots. STEP 6 — VERIFICATION CHECKLIST Before starting: □ Create a git branch: git checkout -b dependency-upgrades □ Commit current package-lock.json/ yarn.lock as backup reference After Phase 1 (lodash): □ Run full test suite □ Manually test any lodash-heavy features (data transformations, array operations) After Phase 2 (axios): □ Run full test suite □ Test all API integration points □ Test error handling paths specifically After Phase 3 (react): □ App boots without console errors □ Run full test suite □ Manual smoke test of all major user flows □ Check for StrictMode-related double-effect issues in development □ Verify createRoot migration complete Rollback plan: If any phase breaks something: git checkout package-lock.json package.json && npm install Then investigate before retrying. Note: This upgrade plan is based on version number analysis and commonly documented breaking change patterns. Always cross-reference with the official changelog/migration guide for react, axios, and any other package before upgrading, as exact breaking changes for your specific version jump should be verified directly from the source.