React-color: Warning Warning: componentWillReceiveProps has been renamed, and is not recommended for use

[cardimajs]

I,m using last stable version and get this warning.

react-dom.development.js:12050 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: ColorPicker, EditableInput

[glenn-p-ryan]

I've left a similar comment on the issue:
https://github.com/casesandberg/react-color/issues/458#issuecomment-519944281

[hlodver]

If you are impatient like me you can use patch-package. It is much easier than forking etc.

The patch file I am using is here:
https://gist.github.com/hlodver/ee336b071f2b2b85c4903660fb8cd686

[cfed]

Thanks @hlodver for sharing patch-package. It's exactly what I need.

[jasonrobson]

I am also waiting for this :v, is there any clue about when they are going to update it?

[CyanoFresh]

same problem

[mikkpokk]

Problem occurs on this file also: https://github.com/casesandberg/react-color/blob/master/src/components/common/ColorWrap.js

One possible approach:

...
import isEqual from 'lodash/isEqual';
...

export const ColorWrap = (Picker) => {
    class ColorPicker extends (PureComponent || Component) {
        ...

        componentDidUpdate(prevProps, prevState) {
            if (! isEqual(this.props, prevProps))
                this.setState({
                    ...color.toState(this.props.color, this.state.oldHue)
                });
        }

        ...
    }
    ...
}

[Snazzie]

Has this project been abandoned?

[casesandberg]

This was fixed with https://github.com/casesandberg/react-color/pull/662 and will be released shortly as [email protected]

[gonzofish]

Thanks @casesandberg