search

influxdata / chronograf

Open source monitoring and visualization UI for the TICK stack
https://www.influxdata.com/time-series-platform/chronograf/
Other
1.51k stars 257 forks source link

chore: don't use React deprecated methods #5696

Closed sranka closed 3 years ago

sranka commented 3 years ago

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: SearchBar

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

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Connect(DashboardsPage)
sranka commented 3 years ago

The following files use deprecated APIs:

The used (4.x) react-redux connect higher order function uses a deprecated API, making another big bunch of React components log deprecation warning. This is fixed since react-redux v6.

sranka commented 3 years ago

After updrading react-redux to 7.2., the app does not start and fails on

inherits.js:5 Uncaught TypeError: Super expression must either be null or a function
    at _inherits (inherits.js:5)
    at errors.tsx:50
    at errors.tsx:50
    at Object.parcelRequire.shared/components/CustomTimeRange.js.@babel/runtime/helpers/classCallCheck (CustomTimeRange.js:276)
    at newRequire (src.f69400ca.js:47)
    at localRequire (src.f69400ca.js:53)
    at Object.parcelRequire.shared/components/CustomTimeRangeDropdown.tsx.@babel/runtime/helpers/classCallCheck (CustomTimeRangeDropdown.tsx:6)
    at newRequire (src.f69400ca.js:47)
    at localRequire (src.f69400ca.js:53)
    at Object.parcelRequire.alerts/containers/AlertsApp.tsx.@babel/runtime/helpers/classCallCheck (AlertsApp.tsx:6)

it requires more time to cope with this

sranka commented 3 years ago

react-redux does not use deprecated API since version 6. Such versions implement =connect= to return =React.memo= . React memo in turn returns a React exotic component (a plain object with extra props). The memo result is therefore not a function and cannot be extended as a class.

For example, a common code like export default ErrorHandling(connect(mstp)(CustomTimeRange)) does not work since ErrorHandling expects a class argument, the exotic =connect= component is not. There are other HOF (withRouter, OnClickOutside) that also wrap the connect method, these are affected by this issue as well. The solution is to change the composition chain so that =connect= is the last outer function, export connect(mstp)(ErrorHandling(CustomTimeRange)) is ok,