5

Creating a new app with create-react-native-app is now generating new warnings. Is there anything I need to do to correct the warnings? For instance, how would I update the components listed:

 ExpoRootComponent, RootErrorBoundary, Text, View

here are the new warnings: (can all this be ignored? will create-react-native-app be updated to use 0.55.x?)

14:30:04: 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: ExpoRootComponent, 
RootErrorBoundary, Text, View

Learn more about this warning here:
xxx:/fb.me/react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer- 
dev.js:5706:19 in printWarning
- ... 21 more stack frames from framework internals
14:30:06: Warning: componentWillReceiveProps is deprecated and will be 
removed in the next major version. Use static getDerivedStateFromProps 
instead.

Please update the following components: Text, View

Learn more about this warning here:
xxx:/fb.me/react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer- 
dev.js:5706:19 in printWarning
- ... 21 more stack frames from framework internals
DCR
  • 14,737
  • 12
  • 52
  • 115

2 Answers2

1

It's been a while since I used react-native, but I use React all day every day.

You are likely experiencing something to do with the new Context API. You should read this: https://github.com/facebook/react-native/issues/18175

Basically, componentWillMount will be deprecated, probably for the next year or so, and after that, it will disappear. Instead, you should be able to change all componentWillMount lifecycle methods to componentDidMount.

To be clear, this:

componentWillMount() {
  performTask()
}

becomes:

componentDidMount() {
  performTask()
}

The difference is mostly regarding when the lifecycle method gets called. It's worth noting that those are both just functions, nothing super magical about them.

componentWillMount() runs when the Component is about to start mounting, and the age old risk is that if you do something like a network request in there (which is an anti-pattern), you may get the network response back before the Component has mounted, so it would be unable to for example, set the Component's state properly with the data.

componentDidMount() runs when the Component is mounted and in DOM.

I would guess that this deprecation is at least somewhat related to helping people avoid issues with state while Components are mounting. The rest of the deprecation is likely due to the new Context API.

You can read about that here: https://reactjs.org/docs/context.html

The fastest possible way to give you "context" about these changes is that it aims to improve passing data like Redux Provider, if you remember this:

<Provider store={store}>
  <App />
</Provider>

Note the store there. There are changes coming related to the store, and it may end up deprecating Redux. I recommend researching it further if you are interested.

Another thing to mention is that there are serious and significant changes coming that have to do with asynchronous rendering, which will drastically affect rendering performance, particularly in large, complex apps.

To learn everything, watch this video by Dan Abramov: https://www.youtube.com/watch?v=v6iR3Zk4oDY

Note again, React 16.3+

In the meantime, you may be able to downgrade back to React 16.2 and restore what you consider to be normal, but I am speculating.

agm1984
  • 15,500
  • 6
  • 89
  • 113
  • thanks for all this information. I'm still at a loss as to what to do. Can the warnings be safely ignored? how would you update the components? – DCR Apr 13 '18 at 19:09
0

The warnings can be safely ignored, but the deprecated lifecycle methods will no longer exist starting from react 17.x.

If you want to update, this SO post is really helpful. It's what I used last week to update my codebase. Both answers to the question provide inside on how to update the code depending on what it is you do inside your lifecycle hooks.

Note: A lot of npm libraries also use the deprecated lifecycle warning, and many of them will not yet be up to date with the latest API changes. So even if you remove all of the deprecated methods from your code, chances are you will still see the warnings turn up in your console.

dentemm
  • 6,231
  • 3
  • 31
  • 43