React-native: [0.54] Warnings for soon to be deprecated lifecycle methods

Created on 3 Mar 2018 · 107Comments · Source: facebook/react-native

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.3
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.54.0 => 0.54.0

Expected Behavior

No warnings would appear in debugger console.

Actual Behavior

Warnings about React soon to be deprecated lifecycle methods are displayed.
e.g.:

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

Please update the following components: Container, Image, ResourceSavingSceneView, TabViewPagerPan, TouchableOpacity, Transitioner, withCachedChildNavigation(TabView)

Learn more about this warning here:
https://fb.me/react-async-component-lifecycle-hooks

Steps to Reproduce

react-native run-ios

With Chrome debugger open.

JavaScript Locked Discussion

Source

rumbogs

👍38

Most helpful comment

For those looking for a way to remove those warnings until the React Native components are updated, you can add the following to your code (eg at the top of index.js):

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
  'Warning: componentWillMount is deprecated',
  'Warning: componentWillReceiveProps is deprecated',
]);

I agree that componentWillMount should be avoided completely, but until the React Native components are updated those warnings are just getting in the way.

nicodeslandes on 5 Mar 2018

👍59 🎉25 ❤17 😄7

All 107 comments

Same here, with run-android too.

waseemw on 3 Mar 2018

This deprecation won't happen for quite some time still, and it's a React issue per sè. Closing.

kelset on 3 Mar 2018

👎68 😕5 👍4

Is this an issue with the React version then? Deprecating it down to 16.0.0 shows the same warning boxes.

mjfox09 on 3 Mar 2018

Same issue Replicated both on ios and android.

graig12 on 4 Mar 2018

Same here too on android.

georgeMorales on 4 Mar 2018

Same issue android and ios.

clebertom on 4 Mar 2018

I understand that you think that will need only a short time poeriod before all dependecies will upgrade itselfs... but in the while, what's the right syntax for console.ignoreYelloBox ?

realtebo on 4 Mar 2018

@kelset These warnings are generating YellowBoxs that we are going to have to ignore for "quite some time"?

Also, this isn't a React issue at all. React is deprecating the component lifecycles that React-Native components are using. The React-Native components need to be upgraded in order to conform with the new React standard.

Would you consider re-opening this issue for extended discussion on the subject?

mjfox09 on 4 Mar 2018

👍82

To my mind, the bigger problem is not that React Native throws this warning, but that it throws six yellow boxes (in my experience at least) due to duplicate deprecation warnings for componentWillMount and componentWillReceiveProps.

This hurts the dev experience and makes debugging more time consuming, as the seconds wasted getting distracted by and dismissing/ignoring duplicate irrelevant errors start to add up.

njwest on 5 Mar 2018

👍94 ❤7 🎉5

Hi Guys,

I'm a beginner and I started to learn React Native for the past 2 days. I got the same error in Android. We can't ignore it - It's my opinion. We need to discuss on it and find the solution.

deepanchakravarthi on 5 Mar 2018

I'm having the same issue, looking for a way to at least hide these specific warnings.

AVAVT on 5 Mar 2018

👍5 ❤2

So can i understand that react is deprecating componentWillMount / componentWillReceiveProps, and it is react-native that will need to update TouchableHighlight/ Text /View. Not the developers that are using the elements wrongly?

sydneywu on 5 Mar 2018

👍4

Every component that uses that method will need to be updated, so both react-native and developers need to take action.

rumbogs on 5 Mar 2018

Also I checked react js website. There is no update/log/documentation about this issue. But I'm very sure that the issue is not because of development bugs. According to the warning message, there must be an alternative solution for it. I could not get after a long time search.. :( and I'm wondering about this issue ;)

deepanchakravarthi on 5 Mar 2018

😕1

In my opinion,react is deprecating the component lifecycles that React-Native components are using.The React-Native components need to be upgraded in order to conform with the new React standard.

ShiChenlong on 5 Mar 2018

👍1

I am a beginner in react native.The same warning message am getting in every project i am creating
componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount.
Please update the following components: Text, View

dhani112 on 5 Mar 2018

This was a confusion for a few engineers on my team. React has an RFC that
proposed changes to the lifecyle methods:
https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md

It's a big change, and supporting it will take some time. To hide the
yellow box would be to inappropriately ignore a deprecation, but users
should understand that this is not due to their code but instead internal
to React Native.

On Mar 5, 2018 7:26 AM, "dhani112" notifications@github.com wrote:

I am a beginner in react native.The same warning message am getting in
every project i am creating

componentWillMount is deprecated and will be removed in the next major
version. Use componentDidMount instead. As a temporary workaround, you can
rename to UNSAFE_componentWillMount. Please update the following
components: Text, View

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/18175#issuecomment-370418075,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAqya3O5qAE8mmbsceiYyt7xHcEMkTmtks5tbT0ZgaJpZM4Sa8No
.

turnrye on 5 Mar 2018

👍12 👎1

Here's a link of "what's to come":

https://github.com/facebook/react-native/issues/18165#issuecomment-369913385

jhnferraris on 5 Mar 2018

👍1

Thank you @jhnferraris and @gre for the code to disable these warnings.

Will this disable warnings for custom components as well as React-Native provided components?

mjfox09 on 5 Mar 2018

@turnrye While hiding deprecation warnings may be inappropriate, there is no reason why the deprecation warnings for both lifecycle methods (which are hard-coded in and thrown by React Native, not by the React lib) should be duplicated twice or more.

The duplication issue is a bug, as the warnings are identical and are thrown from the same path and may obscure other yellow boxes in debugging. It would be appropriate to only throw the deprecation warnings once if the warnings are coming from core React Native components (View, Text, etc).

I suppose occasional minor annoyance is the price of free amazing software

njwest on 5 Mar 2018

👍1

@mjfox09 You should avoid using componentWillMount completely -- put any logic you want to run pre-mount in your component's constructor() function.

njwest on 5 Mar 2018

👎8 👍2

@njwest absolutely – there should not be duplicate warnings.

turnrye on 5 Mar 2018

👎1

@njwest I think there's some confusion in my question. I understand what the RFC states and what my code needs to be changed to.

What I'm asking about is if setting the "warnAboutDeprecatedLifecycles" flag to false (found on the ReactFeatureFlags package) will impact the warnings that React is generating for my projects components or if it will only remove warnings for React-Native components. I don't have my project in front of me to try this.

Take a look at the issue that jhnferraris linked to get a glimpse of the code I'm talking about.

mjfox09 on 5 Mar 2018

For those looking for a way to remove those warnings until the React Native components are updated, you can add the following to your code (eg at the top of index.js):

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
  'Warning: componentWillMount is deprecated',
  'Warning: componentWillReceiveProps is deprecated',
]);

I agree that componentWillMount should be avoided completely, but until the React Native components are updated those warnings are just getting in the way.

nicodeslandes on 5 Mar 2018

👍59 🎉25 ❤17 😄7

alternatively you can also do this: https://github.com/facebook/react-native/issues/18165#issuecomment-369907978

gre on 6 Mar 2018

👍1

Hey everyone!

We’re sorry about this warning slipping through—this warning wasn’t intended to fire until we finish writing the documentation and migration instructions. I believe it got into the release by accident. Please give us a day to sort this out.

Thanks!

gaearon on 7 Mar 2018

👍42

I want to stress these lifecycles are not being deprecated quite yet. Again, we’ll post a blog post with more details. The warning came before the blog post by accident.

gaearon on 7 Mar 2018

Also, this definitely sounds like a bug:

Please update the following components: Text, View

To my mind, the bigger problem is not that React Native throws this warning, but that it throws six yellow boxes (in my experience at least) due to duplicate deprecation warnings for componentWillMount and componentWillReceiveProps.

We'll fix or revert this asap. Please give us a day to sort this out.

gaearon on 7 Mar 2018

👍13

@gaearon Thanks!

jhnferraris on 7 Mar 2018

Quick follow-up to Dan's comment. @grabbou and I chatted about this earlier, and the deprecation warning feature flag has been turned off for the 0.54 branch.

bvaughn on 7 Mar 2018

👍2

It's refreshing to see the Dan's responsiveness compared to the person who closed the issue without even attempting to understand the concern.

hey99xx on 8 Mar 2018

👍14 👎5 😄2

@hey99xx I'm sure Dan would have done the same: close the issue and get in touch with React team ASAP. This was just the right call since this is the React Native repo and this is a React issue. Have some respect for other peoples' decisions you don't fully understand.

enapupe on 8 Mar 2018

👎7 👍3 😕1

Since Dan is the one who re-opened the issue, that's clearly not the case. I also don't see any indication that Lorenzo was the one who contacted React team. From his comment it looked like he was content with all developers see the deprecation warning constantly. I expect the same kind of respect from the contributors of the project, he could have at least guided OP to open an issue in React instead of just closing this report with no resolution.

hey99xx on 8 Mar 2018

👍7 ❤2 👎2

@bvaughn Re: https://github.com/facebook/react-native/issues/18175#issuecomment-371205379,
what version of RN should we be using to use this fix?

jhnferraris on 9 Mar 2018

Whichever one was released after @grabbou's commit (2f84463 ~ March 7, 2018 8:11 am PST)

$ npm info react-native | grep 0.54
  'dist-tags': { latest: '0.54.0', next: '0.54.0-rc.4' },
     '0.54.0-rc.0',
     '0.54.0-rc.2',
     '0.54.0-rc.3',
     '0.54.0-rc.4',
     '0.54.0' ],
     '0.20.0': '2016-02-16T17:50:54.610Z',
     '0.54.0-rc.2': '2018-02-12T16:48:13.799Z',
     '0.54.0-rc.0': '2018-02-12T20:35:08.410Z',
     '0.54.0-rc.3': '2018-02-13T18:17:51.808Z',
     '0.54.0-rc.4': '2018-02-27T19:54:11.332Z',
     '0.54.0': '2018-03-01T19:02:06.832Z' },

Looks like maybe one hasn't been cut yet? I think Mike was going to cherry-pick a few more fixes in before doing another release. My guess is he hasn't finished that yet. (I am not involved with the react-native release process.

bvaughn on 9 Mar 2018

@bvaughn Thanks for the info. I asked because when I tried $ yarn add react-native to update the version I still see the warnings. I'll just wait for the release information

jhnferraris on 9 Mar 2018

👍1

I wanted to cherry-pick few other things before, but since it's already Friday and I don't want to leave this quite important issue too long, I am going to release 0.54.1 with this fix only right now.

Please expect 0.54.2 at the beginning of next week - there are few minor tweaks related to linking that I want to ship.

grabbou on 9 Mar 2018

👍11 😄1

@grabbou react-native-git-upgrade can't find 0.54.1

wellyshen on 10 Mar 2018

👍1

Looks like it hasn't been released yet, @wellyshen:

$ npm info react-native | grep 54.1
     '0.54.0-rc.4': '2018-02-27T19:54:11.332Z'

bvaughn on 10 Mar 2018

😕1

Just released it. Sorry, Circleci failed on deploy and had to retrigger
manually.

On Sat, Mar 10, 2018, 5:23 PM Brian Vaughn notifications@github.com wrote:

Looks like it hasn't been released yet, @wellyshen
https://github.com/wellyshen:

$ npm info react-native | grep 54.1
'0.54.0-rc.4': '2018-02-27T19:54:11.332Z'

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/18175#issuecomment-372042199,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACWcxrifV-GPyX6Y8aMIqeIPazMcZshbks5tc_4KgaJpZM4Sa8No
.

grabbou on 10 Mar 2018

👍4

@grabbou Great! I updated my RN to v0.54.1 everything works fine!

wellyshen on 11 Mar 2018

👍9 🎉5 ❤4 😄2

We'll need to remember to follow up before the next branch cut on this. Docs will likely be ready by then, but it seems wrong this fires for Text/View and the ergonomics seem not ideal too.

gaearon on 12 Mar 2018

To my mind, the bigger problem is not that React Native throws this warning, but that it throws six yellow boxes (in my experience at least) due to duplicate deprecation warnings for componentWillMount and componentWillReceiveProps.

I would not expect this to happen. We only warn once per component type and we collapse all component names into a single warning message (well, one per lifecycle). We _could_ combine the messages further, but I think a separate warning per deprecated lifecycle makes sense.

bvaughn on 12 Mar 2018

Here we go again at 55.1

DimitryDushkin on 6 Apr 2018

👍6

The links are all ready now, so they should actually redirect to the blog post with instructions. I'm not sure if we wanted to hold the actual warnings until 16.4.0 or not though (like we did on the web). Let me chat to @bvaughn.

gaearon on 6 Apr 2018

There also shouldn't be false positives like <View> and <Image>.

gaearon on 6 Apr 2018

Let's reopen for discussion until we're sure everything is intentional.

gaearon on 6 Apr 2018

👍1

We asked @grabbou to cut another patch that temporarily disables the warning flag. I guess we need to keep doing this in every stable release until 16.4.0 comes out.

gaearon on 6 Apr 2018

😕1

I think the (temporary) solution to this will be another cherry pick like 2f84463, as Dan mentioned above.

bvaughn on 6 Apr 2018

I am cherry-picking this one more time. There has to be something really weird with our RNTester app as I didn't see any warnings during testing. I will further investigate that to prevent this in the future.

grabbou on 6 Apr 2018

👍2

@bvaughn why not just set it to false on master until we are ready?

grabbou on 6 Apr 2018

Because we need it turned on internally at FB and don’t currently have a way to use different feature flags in OS builds.

gaearon on 6 Apr 2018

master is auto-synced from fbsource, and it needs to be true in fbsource.

bvaughn on 6 Apr 2018

FYI 0.55.2 is on its way (CI tests right now) including a fix for this
issue.

On Fri, 6 Apr 2018 at 18:18 Dan Abramov notifications@github.com wrote:

Because we need it turned on internally at FB and don’t currently have a
way to use different feature flags in OS builds.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/18175#issuecomment-379303006,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACWcxjEDcmYaYMgsOw46m2sreadK4rsgks5tl5VJgaJpZM4Sa8No
.

grabbou on 6 Apr 2018

🎉4 👍4

I've created a gist that goes into more detail about the current feature flag situation if anyone is interested:
https://gist.github.com/bvaughn/91583b158a207c72d63954452101b5d6

bvaughn on 6 Apr 2018

👍1

@bvaughn Thanks for the explanation. It helps.

Where is this feature flag file for react-native so that we can do some postinstall tweaking to turn off flags that were turned on accidentally?