-
Notifications
You must be signed in to change notification settings - Fork 0
[Snyk] Upgrade react from 18.2.0 to 18.3.1 #395
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Conversation
Snyk has created this PR to upgrade react from 18.2.0 to 18.3.1. See this package in npm: react See this project in Snyk: https://app.snyk.io/org/mohammadnewton/project/22edd24b-54ca-4e0b-a30b-3a42f37de584?utm_source=github&utm_medium=referral&page=upgrade-pr
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hello @nejidevelops, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
Summary of Changes
Hello team, gemini-code-assist here to provide a summary of this pull request. This PR, automatically generated by Snyk, aims to upgrade the react
and react-dom
dependencies from version 18.1.0
to 18.3.1
. The primary motivation for this upgrade is to address a significant number of security vulnerabilities identified in the current dependencies, as detailed in the PR description. Additionally, version 18.3.0 includes warnings for deprecated APIs in preparation for the upcoming React 19 release.
Highlights
- Dependency Upgrade: The core change is the upgrade of the
react
andreact-dom
packages from version18.1.0
to18.3.1
. - Security Fixes: This upgrade addresses numerous security vulnerabilities across various transitive dependencies, including high and critical severity issues like ReDoS, DoS, Prototype Pollution, XSS, and more, as reported by Snyk.
- React 19 Preparation: Version 18.3.0 introduces warnings for deprecated APIs to help prepare the codebase for a smoother transition to React 19.
Changelog
- 0x01-react_intro/task_3/dashboard/package.json
- Upgraded
react
dependency from^18.1.0
to^18.3.1
(line 9). - Upgraded
react-dom
dependency from^18.1.0
to^18.3.1
(line 10).
- Upgraded
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command>
or @gemini-code-assist <command>
. Below is a summary of the supported commands.
Feature | Command | Description |
---|---|---|
Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/
folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
New version arrives,
Fixing bugs, patching holes,
Codebase safer now.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code Review
This pull request, automatically generated by Snyk, proposes an upgrade of the react
dependency from version 18.2.0 to 18.3.1. This is a valuable update as it addresses multiple security vulnerabilities listed in the PR description.
My review focuses on the direct implications of this version change. There are two main points to consider for a smooth upgrade:
- Aligning
react-dom
version: It's crucial to updatereact-dom
to match the newreact
version. - Awareness of Deprecation Warnings: React 18.3.0, included in this upgrade path, introduces new warnings for deprecated APIs, which will be important for future compatibility with React 19.
After addressing the react-dom
version, thorough testing of the application is highly recommended to catch any regressions or new warnings introduced by this upgrade.
Summary of Findings
- React-DOM Version Mismatch:
react-dom
package version should be updated to^18.3.1
to match thereact
package version. Mismatched versions can lead to runtime issues. - Awareness of New Deprecation Warnings: React 18.3.0 (part of this upgrade) introduces new warnings for deprecated APIs. These should be monitored and addressed to prepare for React 19.
Merge Readiness
This pull request is a positive step towards improving security by upgrading the react
dependency. However, before merging, it's highly recommended to address the react-dom
version mismatch by updating it to ^18.3.1
to align with the react
version. Additionally, the team should be prepared to observe and address any new deprecation warnings that may appear after the upgrade.
Once the react-dom
version is corrected, thorough testing (including UI checks and console log monitoring) should be performed to ensure the application functions as expected. As I am an AI assistant, I am not authorized to approve pull requests; please ensure this PR is reviewed and approved by the appropriate team members after the suggested changes are made.
@@ -6,7 +6,7 @@ | |||
"@testing-library/jest-dom": "^5.16.4", | |||
"@testing-library/react": "^13.1.1", | |||
"@testing-library/user-event": "^13.5.0", | |||
"react": "^18.1.0", | |||
"react": "^18.3.1", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While upgrading react
to ^18.3.1
is a good step for security and staying up-to-date, it's critical to also upgrade react-dom
to the same version. Currently, react-dom
is specified as ^18.1.0
(on line 10).
Mismatched versions of react
and react-dom
can lead to subtle bugs, unexpected behavior, or even application crashes. The React team strongly advises keeping these two packages at the exact same version.
Could you please ensure react-dom
is also updated to ^18.3.1
in this PR to maintain compatibility and stability?
@@ -6,7 +6,7 @@ | |||
"@testing-library/jest-dom": "^5.16.4", | |||
"@testing-library/react": "^13.1.1", | |||
"@testing-library/user-event": "^13.5.0", | |||
"react": "^18.1.0", | |||
"react": "^18.3.1", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's important to be aware that React version 18.3.0 (which is part of the upgrade path to 18.3.1) introduces new console warnings for deprecated APIs. According to the React 18.3.0 release notes, this version is functionally identical to 18.2.0 but adds these warnings to help prepare for React 19.
After this upgrade, please check the browser console during development and testing for any new deprecation warnings. Addressing these warnings will be beneficial for future upgrades and maintaining a healthy codebase. This might involve updating how certain React features or patterns are used in your components.
Snyk has created this PR to upgrade react from 18.2.0 to 18.3.1.
ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
The recommended version is 388 versions ahead of your current version.
The recommended version was released a year ago.
Issues fixed by the recommended upgrade:
SNYK-JS-ANSIHTML-1296849
SNYK-JS-ANSIREGEX-1583908
SNYK-JS-WS-7266574
SNYK-JS-BRACES-6838727
SNYK-JS-BRACES-6838727
SNYK-JS-BRACES-6838727
SNYK-JS-BROWSERIFYSIGN-6037026
SNYK-JS-CROSSSPAWN-8303230
SNYK-JS-BODYPARSER-7926860
SNYK-JS-SERIALIZEJAVASCRIPT-536840
SNYK-JS-SERIALIZEJAVASCRIPT-570062
SNYK-JS-SERIALIZEJAVASCRIPT-6056521
SNYK-JS-SHELLQUOTE-1766506
SNYK-JS-SSRI-1246392
SNYK-JS-UNSETVALUE-2400660
SNYK-JS-WEBPACKDEVMIDDLEWARE-6476555
SNYK-JS-WS-7266574
SNYK-JS-HTTPPROXYMIDDLEWARE-8229906
SNYK-JS-IP-6240864
SNYK-JS-ELLIPTIC-8172694
SNYK-JS-FOLLOWREDIRECTS-6141137
SNYK-JS-LOADERUTILS-3043105
SNYK-JS-LODASHTEMPLATE-1088054
SNYK-JS-MERGE-1040469
SNYK-JS-MERGE-1042987
SNYK-JS-MICROMATCH-6838728
SNYK-JS-MICROMATCH-6838728
SNYK-JS-MICROMATCH-6838728
SNYK-JS-NODEFORGE-2430339
SNYK-JS-NODEFORGE-2430341
SNYK-JS-PATHTOREGEXP-7925106
SNYK-JS-PATHTOREGEXP-8482416
SNYK-JS-BROWSERSLIST-1090194
SNYK-JS-COOKIE-8163060
SNYK-JS-YARGSPARSER-560381
SNYK-JS-YARGSPARSER-560381
SNYK-JS-POSTCSS-1255640
SNYK-JS-PROMPTS-1729737
SNYK-JS-REACTDEVUTILS-1083268
SNYK-JS-REQUEST-3361831
SNYK-JS-TERSER-2806366
SNYK-JS-TOUGHCOOKIE-5672873
npm:braces:20180219
SNYK-JS-BABELTRAVERSE-5962462
SNYK-JS-BABELTRAVERSE-5962463
SNYK-JS-ELLIPTIC-7577916
SNYK-JS-ELLIPTIC-7577917
SNYK-JS-SOCKJS-575261
SNYK-JS-TOUGHCOOKIE-5672873
SNYK-JS-UGLIFYJS-1727251
SNYK-JS-WEBPACK-7840298
SNYK-JS-IP-7148531
SNYK-JS-JSON5-3182856
SNYK-JS-SEND-7926862
SNYK-JS-WORDWRAP-3149973
SNYK-JS-ELLIPTIC-7577918
SNYK-JS-ELLIPTIC-8187303
SNYK-JS-ELLIPTIC-8720086
SNYK-JS-EXPRESS-6474509
SNYK-JS-EXPRESS-7926867
SNYK-JS-FOLLOWREDIRECTS-6444610
SNYK-JS-GLOBPARENT-1016905
SNYK-JS-HTMLMINIFIER-3091181
SNYK-JS-ISTANBULREPORTS-2328088
SNYK-JS-LOADERUTILS-3042992
SNYK-JS-LOADERUTILS-3105943
SNYK-JS-MINIMATCH-3050818
SNYK-JS-NODEFORGE-2330875
SNYK-JS-NODEFORGE-2331908
SNYK-JS-NODEFORGE-2430337
SNYK-JS-SERVESTATIC-7926865
Release notes
Package name: react
act
fromreact
f1338fThis release is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19.
Read the React 19 Upgrade Guide for more info.
React
this.refs
to support string ref codemod 909071findDOMNode
outside StrictMode c3b283test-utils
methods d4ea75defaultProps
for function components #25699key
#25697act
fromtest-utils
d4ea75React DOM
unmountComponentAtNode
8a015brenderToStaticNodeStream
#28874React DOM
onRecoverableError
. (@ gnoff in #24591)document
causing a blank page on mismatch. (@ gnoff in #24523)setState
in Safari when adding an iframe. (@ gaearon in #24459)React DOM Server
<title>
elements to match the browser constraints. (@ gnoff in #24679)highWaterMark
to0
. (@ jplhomer in #24641)Server Components (Experimental)
useId()
inside Server Components. (@ gnoff) in #24172Important
Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.
For more information:
[//]: # 'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"react","from":"18.2.0","to":"18.3.1"}],"env":"prod","hasFixes":true,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":["SNYK-JS-ANSIHTML-1296849","SNYK-JS-ANSIREGEX-1583908","SNYK-JS-WS-7266574","SNYK-JS-BRACES-6838727","SNYK-JS-BRACES-6838727","SNYK-JS-BRACES-6838727","SNYK-JS-BROWSERIFYSIGN-6037026","SNYK-JS-CROSSSPAWN-8303230","SNYK-JS-BODYPARSER-7926860","SNYK-JS-SERIALIZEJAVASCRIPT-536840","SNYK-JS-SERIALIZEJAVASCRIPT-570062","SNYK-JS-SERIALIZEJAVASCRIPT-6056521","SNYK-JS-SHELLQUOTE-1766506","SNYK-JS-SSRI-1246392","SNYK-JS-UNSETVALUE-2400660","SNYK-JS-WEBPACKDEVMIDDLEWARE-6476555","SNYK-JS-WS-7266574","SNYK-JS-HTTPPROXYMIDDLEWARE-8229906","SNYK-JS-IP-6240864","SNYK-JS-ELLIPTIC-8172694","SNYK-JS-FOLLOWREDIRECTS-6141137","SNYK-JS-LOADERUTILS-3043105","SNYK-JS-LODASHTEMPLATE-1088054","SNYK-JS-MERGE-1040469","SNYK-JS-MERGE-1042987","SNYK-JS-MICROMATCH-6838728","SNYK-JS-MICROMATCH-6838728","SNYK-JS-MICROMATCH-6838728","SNYK-JS-NODEFORGE-2430339","SNYK-JS-NODEFORGE-2430341","SNYK-JS-PATHTOREGEXP-7925106","SNYK-JS-PATHTOREGEXP-8482416","SNYK-JS-BROWSERSLIST-1090194","SNYK-JS-COOKIE-8163060","SNYK-JS-YARGSPARSER-560381","SNYK-JS-YARGSPARSER-560381","SNYK-JS-POSTCSS-1255640","SNYK-JS-PROMPTS-1729737","SNYK-JS-REACTDEVUTILS-1083268","SNYK-JS-REQUEST-3361831","SNYK-JS-TERSER-2806366","SNYK-JS-TOUGHCOOKIE-5672873","npm:braces:20180219","SNYK-JS-BABELTRAVERSE-5962462","SNYK-JS-BABELTRAVERSE-5962463","SNYK-JS-ELLIPTIC-7577916","SNYK-JS-ELLIPTIC-7577917","SNYK-JS-SOCKJS-575261","SNYK-JS-TOUGHCOOKIE-5672873","SNYK-JS-UGLIFYJS-1727251","SNYK-JS-WEBPACK-7840298","SNYK-JS-IP-7148531","SNYK-JS-JSON5-3182856","SNYK-JS-SEND-7926862","SNYK-JS-WORDWRAP-3149973","SNYK-JS-ELLIPTIC-7577918","SNYK-JS-ELLIPTIC-8187303","SNYK-JS-ELLIPTIC-8720086","SNYK-JS-EXPRESS-6474509","SNYK-JS-EXPRESS-7926867","SNYK-JS-FOLLOWREDIRECTS-6444610","SNYK-JS-GLOBPARENT-1016905","SNYK-JS-HTMLMINIFIER-3091181","SNYK-JS-ISTANBULREPORTS-2328088","SNYK-JS-LOADERUTILS-3042992","SNYK-JS-LOADERUTILS-3105943","SNYK-JS-MINIMATCH-3050818","SNYK-JS-NODEFORGE-2330875","SNYK-JS-NODEFORGE-2331908","SNYK-JS-NODEFORGE-2430337","SNYK-JS-SERVESTATIC-7926865"],"prId":"a9022c80-e9be-4f79-a843-0f616b2373b8","prPublicId":"a9022c80-e9be-4f79-a843-0f616b2373b8","packageManager":"npm","priorityScoreList":[696,696,696,696,589,756,410,619,706,619,619,696,589,477,542,751,629,472,589,681,589,686,589,365,280,452,452,586,315,601,586,372,601,646,265,646,506,786,786,776,776,586,479,402,646,641,105,506,776,786,771,305,255,432,586,586,429,265,265,265,372,315,280,105],"projectPublicId":"22edd24b-54ca-4e0b-a30b-3a42f37de584","projectUrl":"https://app.snyk.io/org/mohammadnewton/project/22edd24b-54ca-4e0b-a30b-3a42f37de584?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":["priorityScore"],"type":"auto","upgrade":["SNYK-JS-ANSIHTML-1296849","SNYK-JS-ANSIREGEX-1583908","SNYK-JS-WS-7266574","SNYK-JS-BRACES-6838727","SNYK-JS-BRACES-6838727","SNYK-JS-BRACES-6838727","SNYK-JS-BROWSERIFYSIGN-6037026","SNYK-JS-CROSSSPAWN-8303230","SNYK-JS-BODYPARSER-7926860","SNYK-JS-SERIALIZEJAVASCRIPT-536840","SNYK-JS-SERIALIZEJAVASCRIPT-570062","SNYK-JS-SERIALIZEJAVASCRIPT-6056521","SNYK-JS-SHELLQUOTE-1766506","SNYK-JS-SSRI-1246392","SNYK-JS-UNSETVALUE-2400660","SNYK-JS-WEBPACKDEVMIDDLEWARE-6476555","SNYK-JS-WS-7266574","SNYK-JS-HTTPPROXYMIDDLEWARE-8229906","SNYK-JS-IP-6240864","SNYK-JS-ELLIPTIC-8172694","SNYK-JS-FOLLOWREDIRECTS-6141137","SNYK-JS-LOADERUTILS-3043105","SNYK-JS-LODASHTEMPLATE-1088054","SNYK-JS-MERGE-1040469","SNYK-JS-MERGE-1042987","SNYK-JS-MICROMATCH-6838728","SNYK-JS-MICROMATCH-6838728","SNYK-JS-MICROMATCH-6838728","SNYK-JS-NODEFORGE-2430339","SNYK-JS-NODEFORGE-24303...