Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[0.54] Warnings for soon to be deprecated lifecycle methods #18175

Closed
rumbogs opened this issue Mar 3, 2018 · 107 comments
Closed

[0.54] Warnings for soon to be deprecated lifecycle methods #18175

rumbogs opened this issue Mar 3, 2018 · 107 comments
Labels
JavaScript Resolution: Locked This issue was locked by the bot. Type: Discussion Long running discussion.

Comments

@rumbogs
Copy link

rumbogs commented Mar 3, 2018 •
edited
Loading

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.
@waseemw
Copy link

waseemw commented Mar 3, 2018

Same here, with run-android too.

@kelset
Copy link
Contributor

kelset commented Mar 3, 2018

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

@kelset kelset closed this as completed Mar 3, 2018
@mjfox09
Copy link

mjfox09 commented Mar 3, 2018

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

@graig12
Copy link

graig12 commented Mar 4, 2018

Same issue Replicated both on ios and android.

@georgeMorales
Copy link

Same here too on android.

@clebertom
Copy link

Same issue android and ios.

@realtebo
Copy link

realtebo commented Mar 4, 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 ?

@mjfox09
Copy link

mjfox09 commented Mar 4, 2018 •
edited
Loading

@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?

@njwest
Copy link

njwest commented Mar 5, 2018 •
edited
Loading

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.

@deepanchakravarthi
Copy link

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.

@AVAVT
Copy link

AVAVT commented Mar 5, 2018

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

@sydneywu
Copy link

sydneywu commented Mar 5, 2018

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?

@rumbogs
Copy link
Author

rumbogs commented Mar 5, 2018

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

@deepanchakravarthi
Copy link

deepanchakravarthi commented Mar 5, 2018 •
edited
Loading

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 ;)

@ghost
Copy link

ghost commented Mar 5, 2018

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.

@dhani112
Copy link

dhani112 commented Mar 5, 2018

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

@turnrye
Copy link
Contributor

turnrye commented Mar 5, 2018 via email

@jhnferraris
Copy link

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

#18165 (comment)

@mjfox09
Copy link

mjfox09 commented Mar 5, 2018

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?

@njwest
Copy link

njwest commented Mar 5, 2018 •
edited
Loading

@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
Copy link

njwest commented Mar 5, 2018

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

@turnrye
Copy link
Contributor

turnrye commented Mar 5, 2018

@njwest absolutely – there should not be duplicate warnings.

@mjfox09
Copy link

mjfox09 commented Mar 5, 2018

@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.

@nicodeslandes
Copy link

nicodeslandes commented Mar 5, 2018 •
edited
Loading

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.

@gre
Copy link
Contributor

gre commented Mar 6, 2018

alternatively you can also do this: #18165 (comment)

@gaearon gaearon reopened this Mar 7, 2018
@gaearon
Copy link
Collaborator

gaearon commented Mar 7, 2018 •
edited
Loading

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
Copy link
Collaborator

gaearon commented Mar 7, 2018 •
edited
Loading

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.

@bvaughn bvaughn mentioned this issue Mar 7, 2018
Merged
@ryan2clw
Copy link

ryan2clw commented Apr 20, 2018 via email

@ryan2clw
Copy link

ryan2clw commented Apr 20, 2018 via email

@ryan2clw
Copy link

ryan2clw commented Apr 20, 2018 via email

@gaearon
Copy link
Collaborator

gaearon commented Apr 20, 2018

I think mailing attachments doesn't work, could you please go to #18175 and post it there? Thanks!

@ryan2clw
Copy link

img_0101

helloworldexporeactwarnings

YellowBoxes in terminal and app

@ryan2clw
Copy link

ryan2clw commented Apr 20, 2018 via email

@gaearon
Copy link
Collaborator

gaearon commented Apr 20, 2018

@ryan2clw

Looking at your StackOverflow question, you were using react-native@0.54.0. As explained in this thread there was a bug in react-native@0.54.0 which caused this. The bug was fixed in react-native@0.54.1. So if you update to that, it should work.

There was a also similar bug in react-native@0.55.0, and it was fixed in react-native@0.55.2.

@gaearon
Copy link
Collaborator

gaearon commented Apr 20, 2018

I’m going to close this as the issue appears solved in 0.54.1 (for 0.54 branch) and 0.55.2 (for 0.55 branch).

@gaearon gaearon closed this as completed Apr 20, 2018
@ryan2clw
Copy link

ryan2clw commented Apr 20, 2018 via email

@gaearon
Copy link
Collaborator

gaearon commented Apr 20, 2018

I would expect it to default to the latest version, but cc @ide in case it doesn't.

@ryan2clw
Copy link

ryan2clw commented Apr 20, 2018 via email

@bvaughn
Copy link
Contributor

bvaughn commented Apr 20, 2018 •
edited
Loading

The main source of deprecation warnings was indeed disabled via 2f84463 and released as 0.54.1, but I believe there was a second source of warnings coming from NativeMethodMixins for 0.54 that wasn't fixed until commit d9bd9d5 which was released with 0.54.3.

(Relates to facebook/react/pull/12212)

Edit 0.54.4 is the latest 54 release, so anyone reading this should probably just update to it anyway because it has a couple of additional, minor bug fixes. 😉

@jonathanandrewsuk
Copy link

I started a create-react-native-app a couple hours ago and the default was react-native@0.54.0, change it to react-native@0.54.1 and it solves this problem. (react-native@0.55.2 didn't work for me.)

@gaearon
Copy link
Collaborator

gaearon commented Apr 20, 2018

I'll ping create-react-native-app maintainers. I don't know why it uses a buggy version by default.

@ericketts
Copy link

I'm not sure whether this still the case, or whether this is the proper place to mention it, but I recall that back in January or so CRNA was shipping a broken expo build as well.

@gaearon
Copy link
Collaborator

gaearon commented Apr 20, 2018

Got a word back from CRNA folks, they’ll fix it to use the latest patch. Thanks for pointing it out!

@ryan2clw
Copy link

ryan2clw commented Apr 20, 2018 via email

@xe4me
Copy link

xe4me commented Apr 22, 2018

console.disableYellowBox = true;

@bvaughn
Copy link
Contributor

bvaughn commented Apr 22, 2018 •
edited
Loading

With regard to this suggestion:

console.disableYellowBox = true;

I would not advise this because it suppresses all warnings- not just the false positive you're trying to suppress.

@nicodeslandes's suggestion from a few days ago shows a safer short term workaround approach:

import { YellowBox } from 'react-native';

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

Although- please be sure to remove this sort of ignore statement in the future- because it would otherwise suppress actionable warnings (deprecations in your own components) that will be important not to ignore.

@timlorepublic
Copy link

anybody's seeing this issue as well with react-native version 0.55.3?

@gaearon
Copy link
Collaborator

gaearon commented May 1, 2018

Note that isMounted is deprecated false positive is being discussed in #18868.
(It's unrelated to this thread.)

@ryan2clw
Copy link

ryan2clw commented May 1, 2018 via email

@Comi9
Copy link

Comi9 commented May 28, 2018

react-native 0.55.4 is still not fixed.

@syrakozz
Copy link

is it fixed on react-native 0.56 ?

@jslz
Copy link

jslz commented Jul 24, 2018 •
edited
Loading

oh, so this is coming from the eslint stage of our build.

original post:
I am seeing this, but it is an "error" not just a "warning" so my build fails. Lo, I am confused.

/Users/x/Dev/a/b/c/src/components/button/d/D.js
  56:16  error  componentWillReceiveProps is deprecated since React 16.3.0, use UNSAFE_componentWillReceiveProps instead, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops  react/no-deprecated

react-native-cli: 2.0.1
react-native: 0.53.0
npm: 5.6.0
node: v8.11.3
("react" in package-lock.json is "16.2.0" per RN 0.53.0 but still have these errors)
running on mac os x 10.13.6

@skptricks
Copy link

Check out solution for this issue : https://www.skptricks.com/2018/10/warning-componentwillmount-is-deprecated-in-react-native.html

tbergquist-godaddy pushed a commit to kiwicom/mobile that referenced this issue Jan 24, 2019
@mrtnzlml
Dependencies: upgrade React Native to the ^0.54.0 version
40b8778 
This fixes yellow boxes (bug in RN release - see facebook/react-native#18175) as well as broken maps.
@facebook facebook locked as resolved and limited conversation to collaborators Apr 20, 2019
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Apr 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
JavaScript Resolution: Locked This issue was locked by the bot. Type: Discussion Long running discussion.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests