Skip to content
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

Bump React to version 16.14.0 #501

Merged
merged 7 commits into from
Oct 24, 2023
Merged

Bump React to version 16.14.0 #501

merged 7 commits into from
Oct 24, 2023

Conversation

rhystmills
Copy link
Contributor

@rhystmills rhystmills commented Oct 20, 2023

Co-authored-by: @jonathonherbert and @samanthagottlieb

This PR bumps react in tagmanager to 16.14.0, which will allow us to make use of React packages using hooks (introduced in 16.8.0) - for example the upcoming prosemirror-editor.

Bumping to 17+ will be more complicated - some of our dependencies are still using the deprecated componentWillMount, componentWillReceiveProps and componentWillUpdate methods - which are removed in React 17 - leaving only their UNSAFE_... equivalents.

A few things that came up in the 15 > 16 React bump (may be relevant to atom-workshop and targeting if/when we do it there):

  • The componentWill… and componentDid… lifecycle methods are now deprecated. To continue to use past React 16, use UNSAFE_component… instead. They're not 'unsafe' in terms of security, but apparently encouraged bad development practices: https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html
    -prop-types comes from its own library now. Import from there instead of using React.PropTypes
  • the moment localiser has been moved to a separate package from version 3 > 4 (necessary to be compatible with React v16).
  • react-transition-group needed a bump - meaning that import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' became import {CSSTransitionGroup} from 'react-transition-group';

I've fixed a couple of pre-existing missing key prop warnings as well.

I did attempt bumping react-router but that one looks complicated as the API has changed - browser-history will come from a separate package, Link comes from a separate package (react-router-dom), IndexRoute no longer exists, and the app now needs to be wrapped in a Router or BrowserRouter among other snags.

How to test

Run tagmanager locally according to the instructions in the readme, or deploy to CODE. Does the app run as expected? Do you see any React-themed errors?
(There will be some warnings about deprecated methods, but no errors)

rhystmills and others added 7 commits September 11, 2023 12:15
Co-authored-by: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Co-authored-by: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Co-authored-by: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Co-authored-by: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Copy link

@dblatcher dblatcher left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@rhystmills rhystmills merged commit a1181bc into main Oct 24, 2023
1 check passed
@rhystmills rhystmills deleted the rm-jsh/bump-react branch October 24, 2023 12:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants