Fix deprecated React patterns ahead of React 17 upgrade #1098
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Replace string refs with React.createRef() in PageCurate and FilterBar components. String refs have been deprecated since React 16.3 and will not work in future versions. Remove ReactDOM.findDOMNode usage in SavePopUp by converting the template textarea from an uncontrolled component (defaultValue) to a controlled component (value). This eliminates the need for direct DOM manipulation when updating the textarea content. These changes are prerequisites for upgrading from React 16 to React 17.
✅ Deploy Preview for blissful-goodall-fa23f6 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR modernizes React patterns to prepare for React 17 upgrade by removing deprecated APIs that will break in future React versions.
Changes:
- Replaced deprecated string refs with
React.createRef()in PageCurate component for modal management - Removed deprecated
ReactDOM.findDOMNodeusage in SavePopUp and converted textarea from uncontrolled to controlled component - Updated FilterBar to use callback ref pattern consistently (removed unused
React.createRef())
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/components/PageCurate.js | Converted string refs (ref="contributeModal", ref="proposeModal") to React.createRef() for ContributePrompt and ProposePrompt modal components |
| src/components/Navigation/Ui/SavePopUp.js | Removed deprecated ReactDOM.findDOMNode usage and converted textarea from uncontrolled (defaultValue) to controlled component (value) with proper state management |
| src/components/FilterBar.js | Updated to properly use callback ref pattern by initializing this.typeahead to null instead of unused React.createRef(), consistent with existing callback ref in render method |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
React.createRef()in PageCurate and FilterBarReactDOM.findDOMNodeusage in SavePopUpDetails
This PR removes deprecated React patterns that will break or cause issues when upgrading to React 17:
String refs (
ref="stringName") have been deprecated since React 16.3. These are replaced withReact.createRef()which is the modern approach.ReactDOM.findDOMNodeis deprecated and will be removed in a future React version. In SavePopUp, it was being used to directly manipulate a textarea's value. Fixed by converting the textarea from an uncontrolled component (defaultValue) to a controlled component (value), so React handles the updates properly.Testing
All 126 existing tests pass. The deprecation warnings from react-bootstrap's Modal component are expected and will be resolved when we upgrade react-bootstrap as part of the React 17 migration.