React-native-collapsible: RN 0.54 / React 16.3 deprecation warnings for componentWillReceiveProps, componentWillMount

[peacechen]

Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.

Please update the following components: HTML
Learn more about this warning here:
https://fb.me/react-async-component-lifecycle-hooks

Warning: componentWillMount is deprecated and will be removed in the next major version. Use componentDidUpdate instead. As a temporary workaround, you can rename to UNSAFE_componentWillUpdate.

Please update the following components: HTML

The fixes are actually simple and maintain backward compatibility.
Replace componentWillReceiveProps with componentDidUpdate and tweak logic appropriately.

In the rare case that getDerivedStateFromProps is necessary, a polyfill can be used to maintain backwards compatibility.
See https://github.com/reactjs/react-lifecycles-compat

[iRoachie]

Thanks for reporting this

[peacechen]

If you'd like, I can submit a PR for this. Accordion should be a straight-forward fix. The logic in Collapsible is unusual and may require additional testing.
https://github.com/oblador/react-native-collapsible/blob/master/Collapsible.js#L38

[iRoachie]

How would changing it to getDerivedStateFromProps affect those not on react 16.3?

[peacechen]

If getDerivedStateFromProps is chosen, the react-lifecycles-compat package polyfills it for backwards compatibility.

However in my experience that's not been necessary. componentDidUpdate is functionally equivalent in all but the rarest cases.

Edit: The content in componentWillMount may be moved to the constructor.
componentDidUpdate receives a prevProps parameter, so the logic is inverted compared to componentWillReceiveProps' nextProps parameter. Simple adjustment usually.

[iRoachie]

Alright then, you can go ahead and do the PR and let's run some tests on it.

[iRoachie]

@peacechen Are you still interested in doing the PR?

[peacechen]

Yes I'll submit a PR soon. Sorry this got lost in the shuffle.

[peacechen]

Created PR #192

[noahtallen]

Any progress on this? We're getting a lot of warnings in our simulators due to it 😋

[iRoachie]

Will try to look at this weekend 😕

[peacechen]

I've been using this in my fork for a month and it's been 100% stable and functionally equivalent.

[iRoachie]

Would like to point out these errors don't show in [email protected]

[iRoachie]

Still merging your fix though @peacechen, thanks!

[iRoachie]

Fixed in v0.13.0. Thanks, everyone.

[markentingh]

Thank you for putting in the work to get this resolved, guys!

[noahtallen]

I'm not sure if I missed something, but I'm still getting the warning.

Importing this: import Accordion from 'react-native-collapsible/Accordion'

react-native version: 0.55.4 (need to wait for a future minor release so that windows bug is resolved)
react version: 16.4.0
react-native-collapsible: ^0.13.0

We were on the previous version of react-native-collapsible, and I upgraded by bumping the version number in package.json and running yarn again. When that didn't work, I nuked node_modules and deleted the app on the simulator before trying again, but to no avail. Still getting the following warning:

isMounted(...) is deprecated in plain JavaScript React classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.

Reading the title of this issue again, I see that isMounted wasn't included explicitly here, but the other issue that did talk about isMounted was marked as a duplicate of this one.

[iRoachie]

There’s no other reference to deprecated lifecycle methods in the source. But in my experience it has shown sometimes without any other components

[noahtallen]

Interesting. It only shows up when using this package, never seen it anywhere else. I'll keep looking into it

[iRoachie]

Is there any reason you don’t upgrade to 0.55? Isn’t 0.56 the one that has the windows bug?

[noahtallen]

Oops, that's a typo. We're on 0.55.4, sorry!

[iRoachie]

Funny enough I don’t see those warnings in the example app and it’s running 0.55.2

[segheysens]

Thanks for your work @iRoachie, but I can confirm that I'm on react-native 55.4 and react-native-collapsible 0.13 and seeing the warnings as well.

Looks like it was fixed in 0.56 stable, probably better to just upgrade.

[noahtallen]

I'll try to update to 0.56 at some point soon to test it out. I'd like to wait for a minor version so that our developers on windows aren't hanging, but hopefully it goes smoothly

[markentingh]

I gave up on using this component and developed my own, which works quite well. No warnings, either.

https://github.com/Datasilk/Dedicate/blob/master/UI/Collapsible.js

[iRoachie]

@markentingh That's great man! Props to you 👏🏽

[iRoachie]

As I said earlier the bug has been fixed for the deprecated lifecycle methods. The isMounted warning you're seeing is from within react-native and not in the collapsible source code. This happens because we use the measure function to get the height of the content, and this internal measure function in react-native was using isMounted.

Here's the link to the issue on react-native's repo where you can see the comments from @gaearon https://github.com/facebook/react-native/issues/18868.

The only real fix is to upgrade to a newer version of react-native. Locking this issue as there's nothing else we can do on our side.