Upgrade to react 19 #610
Upgrade to react 19 #610
Conversation
this avoids this warning in console: [SERVER] Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform
Updates component to use React.createRef() to handle React 19 breaking changes: - Replaces string refs with createRef - Removes ReactDOM.findDOMNode usage
WalkthroughThe pull request introduces configuration and component updates focusing on React and Babel settings. The Changes
Sequence DiagramsequenceDiagram
participant Dev as Developer
participant Babel as Babel Config
participant React as React Component
Dev->>Babel: Configure automatic JSX runtime
Babel-->>React: Apply new transformation rules
Dev->>React: Refactor refs using createRef()
React-->>Dev: Modernized component references
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
package.json (1)
Potential compatibility issue with react-router and react-router-dom
While most dependencies support React 19, react-router and react-router-dom specify
>=18as their peer dependency requirement. This could potentially lead to compatibility issues since their latest versions haven't been explicitly tested with React 19. Here's what needs attention:
react-routerandreact-router-domshould be pinned to versions that explicitly support React 19, or consider waiting for official React 19 support- Other dependencies (
react-redux,react-intl,react-transition-group) are compatible with React 19🔗 Analysis chain
Line range hint
78-89: Verify peer dependency compatibilityLet's verify if all React-related dependencies are compatible with React 19.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check peer dependencies of react-related packages for pkg in react-redux react-router react-router-dom react-transition-group react-intl; do echo "Checking $pkg..." curl -s "https://registry.npmjs.org/$pkg/latest" | jq -r '.peerDependencies.react' doneLength of output: 1275
🧹 Nitpick comments (3)
client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx (3)
49-62: Consider reducing form handling duplicationThe switch statement pattern is repeated across methods. Consider extracting the form mode logic into a helper method or using a mapping object.
+ const FORM_REFS = { + 0: { author: 'horizontalAuthorRef', text: 'horizontalTextRef' }, + 1: { author: 'stackedAuthorRef', text: 'stackedTextRef' }, + 2: { author: 'inlineAuthorRef', text: 'inlineTextRef' } + }; + handleChange() { - let comment; - switch (this.state.formMode) { - case 0: - comment = { - author: this.horizontalAuthorRef.current.value, - text: this.horizontalTextRef.current.value, - }; - break; - // ... other cases - } + const refs = FORM_REFS[this.state.formMode]; + if (!refs) throw new Error(`Unexpected state.formMode ${this.state.formMode}`); + + const comment = { + author: this[refs.author].current.value, + text: this[refs.text].current.value + }; this.setState({ comment }); }
Line range hint
1-1: Remove eslint-disable commentNow that string refs have been replaced, the
react/no-string-refsdisable comment can be removed.- /* eslint-disable react/no-find-dom-node, react/no-string-refs */ + /* eslint-disable react/no-find-dom-node */
Line range hint
1-300: Consider converting to functional componentWith the modernization efforts, consider converting this class component to a functional component using hooks:
- Replace class fields with
useState- Replace
createRefwithuseRef- Replace lifecycle methods with
useEffect
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (3)
babel.config.js(1 hunks)client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx(6 hunks)package.json(2 hunks)
🔇 Additional comments (2)
babel.config.js (1)
11-11: LGTM! Good adoption of automatic JSX runtime
The addition of runtime: 'automatic' is a recommended optimization that removes the need for React imports in JSX files and enables future React features.
client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx (1)
29-34: LGTM! Good modernization of refs
Excellent transition from legacy string refs to modern createRef(). This aligns well with React best practices.
Upgrade to and remove new breaking/deprecated changes in react 19.0
This change is
Summary by CodeRabbit
New Features
CommentFormcomponent to utilize modern reference handling withcreateRef, improving input management.Bug Fixes
idattributes with new ref names.Chores