search

airbnb / rheostat

Rheostat is a www, mobile, and accessible slider component built with React
MIT License
1.69k stars 188 forks source link

React@16.9.0: Warning: componentWillReceiveProps has been renamed, and is not recommended for use #248

Open jmyrland opened 5 years ago

jmyrland commented 5 years ago

Upon updating React to version 16.9.0, we get the following warnings when testing:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks 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: Rheostat

I have added a PR (#247) to "fix" this, by applying the npx react-codemod rename-unsafe-lifecycles command for the src folder - however, the tests are failing 🤔

ljharb commented 5 years ago

We support React versions older than 16.3, so we can't use the renamed method without a breaking change. The warning should just be ignored for the time being, since it won't actually break anything until React 17 in async mode.

wdoug commented 5 years ago

Wouldn't it be preferable to update to safe lifecycle methods, instead of renaming them to the UNSAFE variant? For example, converting usages of componentWillReceiveProps to componentDidUpdate or some other variant based on the use case.

ljharb commented 5 years ago

That might make sense, but those methods have different semantics. The current ones were chosen intentionally.

mohdashraf010897 commented 2 years ago

@jmyrland Have added a fix in a forked repo.

https://www.npmjs.com/package/@appbaseio/rheostat/v/1.0.0-alpha.2

I have basically checkout the 2.1.1- tag and made appropriate changes to get rid of the lifecycle warnings.