kelsonic commented 5 years ago

Description

When working locally since having updated to React v^16.9.0, you will notice at least one of the following warning in the dev tools:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

Screenshot(s)

Potential Solution(s)

While there are long-term solutions to these warnings as mentioned in the link above, the following command should update all of the upcoming deprecated lifecycle method names automatically and serve as a temporary fix that will not leave the code broken when we upgrade to React v^17.0.0:

npx react-codemod rename-unsafe-lifecycles

You can learn more about this codemod here. Alternatively, you could also manually go through the codebase and prefix UNSAFE_ to the following lifecycle method names:

componentWillMount
componentWillReceiveProps
componentWillUpdate

kelsonic commented 5 years ago

Oh it looks like this was already completed in our codebase... So then why are we still getting warnings locally? I wonder if it's due to our dependencies having not updated, yet. Or perhaps they did update and we just haven't updated our own dependency versions, yet. 🤔

It looks like it might very well be from other dependencies: JedWatson/react-select#3715

kelsonic commented 5 years ago

Our current outdated dependency list:

Package                                         Current      Wanted       Latest       Package Type    URL
@babel/core                                     7.3.3        7.6.0        7.6.0        devDependencies https://babeljs.io/
@babel/plugin-proposal-class-properties         7.3.3        7.5.5        7.5.5        devDependencies https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-class-properties
@babel/plugin-proposal-export-namespace-from    7.2.0        7.5.2        7.5.2        devDependencies https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-export-namespace-from
@babel/plugin-proposal-function-sent            7.2.0        7.5.0        7.5.0        devDependencies https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-function-sent
@babel/plugin-proposal-optional-chaining        7.2.0        7.6.0        7.6.0        devDependencies https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-optional-chaining
@babel/polyfill                                 7.2.5        7.6.0        7.6.0        devDependencies https://babeljs.io/
@babel/preset-env                               7.3.1        7.6.0        7.6.0        devDependencies https://babeljs.io/
@babel/register                                 7.0.0        7.6.0        7.6.0        devDependencies https://github.com/babel/babel/tree/master/packages/babel-register
@department-of-veterans-affairs/formation-react 4.9.2        4.10.0       4.10.0       dependencies    http://design.va.gov
@fortawesome/fontawesome-free                   5.6.3        5.11.1       5.11.1       dependencies    https://fontawesome.com
@sentry/browser                                 5.4.0        5.6.3        5.6.3        devDependencies https://github.com/getsentry/sentry-javascript/tree/master/packages/browser
ajv                                             4.11.7       4.11.8       6.10.2       devDependencies https://github.com/epoberezkin/ajv
append-query                                    2.0.1        2.0.1        2.1.0        devDependencies https://github.com/lakenen/node-append-query
autoprefixer                                    9.5.1        9.6.1        9.6.1        devDependencies https://github.com/postcss/autoprefixer#readme
axe-core                                        2.6.1        2.6.1        3.3.2        devDependencies https://github.com/dequelabs/axe-core#readme
babel-eslint                                    9.0.0        9.0.0        10.0.3       devDependencies https://github.com/babel/babel-eslint
babel-jest                                      23.6.0       23.6.0       24.9.0       devDependencies https://github.com/facebook/jest.git
babel-loader                                    8.0.5        8.0.6        8.0.6        devDependencies https://github.com/babel/babel-loader
babel-plugin-dynamic-import-node                1.2.0        1.2.0        2.3.0        devDependencies https://github.com/airbnb/babel-plugin-dynamic-import-node#readme
babel-plugin-istanbul                           5.1.1        5.2.0        5.2.0        devDependencies https://github.com/istanbuljs/babel-plugin-istanbul#readme
babel-plugin-react-transform                    2.0.2        2.0.2        3.0.0        devDependencies https://github.com/gaearon/babel-plugin-react-transform#readme
babel-plugin-transform-react-remove-prop-types  0.4.2        0.4.24       0.4.24       devDependencies https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types#readme
blob-polyfill                                   2.0.20171115 2.0.20171115 4.0.20190430 dependencies    https://github.com/bjornstar/blob-polyfill
body-parser                                     1.17.1       1.19.0       1.19.0       devDependencies https://github.com/expressjs/body-parser#readme
camelcase-keys-recursive                        0.8.2        0.8.3        0.8.3        dependencies    https://github.com/mikeljames/camelcase-keys-recursive#readme
chai                                            4.1.1        4.2.0        4.2.0        devDependencies http://chaijs.com
cheerio                                         1.0.0-rc.2   1.0.0-rc.3   1.0.0-rc.3   devDependencies https://github.com/cheeriojs/cheerio#readme
chokidar                                        2.1.6        2.1.8        3.1.1        devDependencies https://github.com/paulmillr/chokidar
chromedriver                                    2.38.1       2.46.0       77.0.0       devDependencies https://github.com/giggio/node-chromedriver
classlist-polyfill                              1.0.3        1.2.0        1.2.0        dependencies    https://github.com/yola/classlist-polyfill
classnames                                      2.2.5        2.2.6        2.2.6        dependencies    https://github.com/JedWatson/classnames#readme
command-line-args                               3.0.5        3.0.5        5.1.1        devDependencies https://github.com/75lb/command-line-args#readme
cookie                                          0.3.1        0.3.1        0.4.0        dependencies    https://github.com/jshttp/cookie#readme
cookie-parser                                   1.4.3        1.4.4        1.4.4        dependencies    https://github.com/expressjs/cookie-parser#readme
core-js                                         2.5.7        2.6.9        3.2.1        dependencies    https://github.com/zloirock/core-js#readme
cors                                            2.8.3        2.8.5        2.8.5        devDependencies https://github.com/expressjs/cors#readme
css-loader                                      0.28.10      0.28.11      3.2.0        devDependencies https://github.com/webpack-contrib/css-loader
downshift                                       1.22.5       1.31.16      3.3.1        dependencies    https://github.com/downshift-js/downshift#readme
enhanced-resolve                                0.7.6        0.7.6        4.1.0        devDependencies http://github.com/webpack/enhanced-resolve
enzyme                                          3.8.0        3.10.0       3.10.0       devDependencies http://airbnb.io/enzyme/
enzyme-adapter-react-16                         1.7.1        1.14.0       1.14.0       devDependencies http://airbnb.io/enzyme/
eslint                                          4.18.2       4.19.1       6.4.0        devDependencies https://eslint.org
eslint-config-airbnb                            15.1.0       15.1.0       18.0.1       devDependencies https://github.com/airbnb/javascript
eslint-config-prettier                          3.1.0        3.6.0        6.3.0        devDependencies https://github.com/prettier/eslint-config-prettier#readme
eslint-import-resolver-babel-module             5.0.1        5.1.0        5.1.0        devDependencies https://github.com/tleunen/eslint-import-resolver-babel-module#readme
eslint-plugin-import                            2.14.0       2.18.2       2.18.2       devDependencies https://github.com/benmosher/eslint-plugin-import
eslint-plugin-jest                              21.26.1      21.27.2      22.17.0      devDependencies https://github.com/jest-community/eslint-plugin-jest#readme
eslint-plugin-jsx-a11y                          5.1.1        5.1.1        6.2.3        devDependencies https://github.com/evcohen/eslint-plugin-jsx-a11y#readme
eslint-plugin-mocha                             5.2.0        5.3.0        6.1.1        devDependencies https://github.com/lo1tuma/eslint-plugin-mocha
eslint-plugin-prettier                          2.7.0        2.7.0        3.1.1        devDependencies https://github.com/prettier/eslint-plugin-prettier#readme
eslint-plugin-react                             7.12.4       7.14.3       7.14.3       devDependencies https://github.com/yannickcr/eslint-plugin-react
eslint-plugin-react-hooks                       1.6.0        1.7.0        2.0.1        devDependencies https://reactjs.org/
eslint-plugin-scanjs-rules                      0.1.5        0.1.8        0.2.1        devDependencies https://github.com/mozfreddyb/eslint-plugin-scanjs-rules/
eslint-plugin-va-enzyme                         1.0.0        exotic       exotic       devDependencies ./script/custom-eslint/va-enzyme
eslint-stats                                    1.0.0        1.0.1        1.0.1        devDependencies https://github.com/ganimomer/eslint-stats#readme
exports-loader                                  0.6.4        0.6.4        0.7.0        devDependencies https://webpack.js.org/loaders/exports-loader
express                                         4.16.4       4.17.1       4.17.1       dependencies    http://expressjs.com/
express-history-api-fallback                    2.1.0        2.2.1        2.2.1        devDependencies https://gitlab.com/sebdeckers/express-history-api-fallback#readme
file-loader                                     1.1.11       1.1.11       4.2.0        devDependencies https://github.com/webpack-contrib/file-loader
find                                            0.2.9        0.2.9        0.3.0        devDependencies https://github.com/yuanchuan/find#readme
fine-uploader                                   5.14.2       5.16.2       5.16.2       dependencies    https://github.com/FineUploader/fine-uploader#readme
foundation-sites                                5.5.3        5.5.3        6.5.3        dependencies    http://foundation.zurb.com/sites
fs-extra                                        7.0.0        7.0.1        8.1.0        devDependencies https://github.com/jprichardson/node-fs-extra
history                                         3.3.0        3.3.0        4.10.1       dependencies    https://github.com/ReactTraining/history#readme
http-server                                     0.9.0        0.9.0        0.11.1       devDependencies https://github.com/indexzero/http-server#readme
imports-loader                                  0.6.5        0.6.5        0.8.0        devDependencies https://github.com/webpack-contrib/imports-loader
ismobilejs                                      0.4.1        0.4.1        1.0.3        dependencies    https://github.com/kaimallea/isMobile
jest                                            23.6.0       23.6.0       24.9.0       devDependencies https://jestjs.io/
jest-image-snapshot                             2.7.0        2.11.0       2.11.0       devDependencies https://github.com/americanexpress/jest-image-snapshot#readme
jsdom                                           11.1.0       11.12.0      15.1.1       devDependencies https://github.com/jsdom/jsdom#readme
json2csv                                        4.2.1        4.5.3        4.5.3        devDependencies https://github.com/zemirco/json2csv#readme
jsonschema                                      1.1.1        1.2.4        1.2.4        dependencies    https://github.com/tdegrunt/jsonschema#readme
leaflet-control-geocoder                        1.5.4        1.9.0        1.9.0        dependencies    https://github.com/perliedman/leaflet-control-geocoder#readme
metalsmith-in-place                             1.4.4        1.4.4        4.4.0        dependencies    https://github.com/metalsmith/metalsmith-in-place#readme
metalsmith-layouts                              1.8.1        1.8.1        2.3.1        dependencies    https://github.com/metalsmith/metalsmith-layouts#readme
metalsmith-markdownit                           0.4.0        0.4.0        0.5.0        dependencies    https://github.com/mayo/metalsmith-markdownit#readme
metalsmith-permalinks                           0.5.0        0.5.0        2.2.0        dependencies    https://github.com/segmentio/metalsmith-permalinks#readme
mini-css-extract-plugin                         0.7.0        0.7.0        0.8.0        devDependencies https://github.com/webpack-contrib/mini-css-extract-plugin
mocha                                           3.5.0        3.5.3        6.2.0        devDependencies https://mochajs.org/
mocha-junit-reporter                            1.17.0       1.23.1       1.23.1       devDependencies https://github.com/michaelleeallen/mocha-junit-reporter#readme
moment                                          2.18.1       2.24.0       2.24.0       dependencies    http://momentjs.com
nightwatch                                      0.9.16       0.9.21       1.2.3        devDependencies http://nightwatchjs.org
node-fetch                                      2.1.1        2.6.0        2.6.0        devDependencies https://github.com/bitinn/node-fetch
node-sass                                       4.11.0       4.12.0       4.12.0       devDependencies https://github.com/sass/node-sass
null-loader                                     0.1.1        0.1.1        3.0.0        devDependencies https://github.com/webpack-contrib/null-loader
nyc                                             11.1.0       11.9.0       14.1.1       devDependencies https://github.com/istanbuljs/nyc#readme
prettier                                        1.14.3       1.18.2       1.18.2       devDependencies https://prettier.io
prop-types                                      15.6.1       15.7.2       15.7.2       dependencies    https://facebook.github.io/react/
puppeteer                                       1.9.0        1.20.0       1.20.0       devDependencies https://github.com/GoogleChrome/puppeteer#readme
react                                           16.8.6       16.9.0       16.9.0       dependencies    https://reactjs.org/
react-cropper                                   1.0.1        1.3.0        1.3.0        dependencies    http://roadmanfong.github.io/react-cropper/
react-dom                                       16.8.6       16.9.0       16.9.0       dependencies    https://reactjs.org/
react-dropzone                                  4.2.5        4.3.0        10.1.9       dependencies    https://github.com/react-dropzone/react-dropzone
react-redux                                     5.1.1        5.1.1        7.1.1        dependencies    https://github.com/reduxjs/react-redux
react-router                                    3.2.1        3.2.4        5.0.1        dependencies    https://github.com/ReactTraining/react-router#readme
react-scroll                                    1.7.10       1.7.10       1.7.14       dependencies    https://github.com/fisshy/react-scroll
react-tabs                                      2.3.0        2.3.1        3.0.0        dependencies    https://github.com/reactjs/react-tabs
react-test-renderer                             16.8.6       16.9.0       16.9.0       devDependencies https://reactjs.org/
react-transition-group                          1.2.1        1.2.1        4.3.0        dependencies    https://github.com/reactjs/react-transition-group#readme
redux-thunk                                     2.2.0        2.3.0        2.3.0        dependencies    https://github.com/reduxjs/redux-thunk
request                                         2.81.0       2.88.0       2.88.0       devDependencies https://github.com/request/request#readme
reselect                                        2.5.4        2.5.4        4.0.0        dependencies    https://github.com/reduxjs/reselect#readme
sass-lint                                       1.10.2       1.13.1       1.13.1       devDependencies https://github.com/sasstools/sass-lint
sass-loader                                     6.0.6        6.0.7        8.0.0        devDependencies https://github.com/webpack-contrib/sass-loader
saucelabs                                       1.4.0        1.5.0        2.3.0        devDependencies https://github.com/saucelabs/node-saucelabs
selenium-server                                 3.4.0        3.141.59     3.141.59     devDependencies https://github.com/eugeneware/selenium-server#readme
semver                                          5.7.0        5.7.1        6.3.0        devDependencies https://github.com/npm/node-semver#readme
sentry-testkit                                  2.2.1        2.2.1        3.0.2        devDependencies https://github.com/wix/sentry-testkit#readme
sinon                                           3.2.1        3.3.0        7.4.2        devDependencies https://sinonjs.org/
style-loader                                    0.20.2       0.20.3       1.0.0        devDependencies https://github.com/webpack-contrib/style-loader
svg-url-loader                                  2.3.2        2.3.3        3.0.2        devDependencies https://github.com/bhovhannes/svg-url-loader#readme
terser-webpack-plugin                           1.3.0        1.4.1        2.1.0        devDependencies https://github.com/webpack-contrib/terser-webpack-plugin
uglify-js                                       3.4.0        3.6.0        3.6.0        devDependencies https://github.com/mishoo/UglifyJS2#readme
url-loader                                      0.6.2        0.6.2        2.1.0        devDependencies https://github.com/webpack-contrib/url-loader
url-search-params                               0.10.0       0.10.2       1.1.0        dependencies    https://github.com/WebReflection/url-search-params
uswds                                           1.6.10       1.6.10       2.2.0        dependencies    https://github.com/uswds/uswds#readme
vanilla-lazyload                                8.17.0       8.17.0       12.0.0       dependencies    http://verlok.github.io/lazyload
vets-json-schema                                3.138.10     exotic       exotic       dependencies    https://github.com/department-of-veterans-affairs/vets-json-schema.git#fa98845b15c9091bb3eae4677485566ddfbab494
webpack                                         4.32.2       4.40.2       4.40.2       devDependencies https://github.com/webpack/webpack
webpack-bundle-analyzer                         3.3.2        3.5.0        3.5.0        devDependencies https://github.com/webpack-contrib/webpack-bundle-analyzer
webpack-dev-server                              3.5.1        3.8.1        3.8.1        devDependencies https://github.com/webpack/webpack-dev-server#readme
webpack-manifest-plugin                         2.0.0-rc.2   2.0.4        2.0.4        devDependencies https://github.com/danethurber/webpack-manifest-plugin
whatwg-fetch                                    2.0.3        2.0.4        3.0.0        dependencies    https://github.com/github/fetch#readme
winston                                         2.3.1        2.4.4        3.2.1        devDependencies https://github.com/winstonjs/winston#readme

kelsonic commented 5 years ago

So due to dependencies sometimes being shared across applications, and sometimes only used by a single application that doesn't have an owner (and we may not be familiar with it ourselves), it's difficult to safely upgrade dependencies, but that is still something we should have eyes on... Should this ticket be moved to Icebox/Backlog for now? @ncksllvn @Karak888

department-of-veterans-affairs / va.gov-team

Update dependencies with deprecated React lifecycle method name warnings #1942

Description

Screenshot(s)

Potential Solution(s)