React-transition-group: StrictMode warning for componentWillReceiveProps in TransitionGroup

Created on 29 May 2018  路  4Comments  路  Source: reactjs/react-transition-group

Warning: Unsafe lifecycle methods were found within a strict-mode tree:

componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: TransitionGroup

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

Most helpful comment

Still happening with React 16.13.0.

Warning: componentWillMount has been renamed, and is not recommended for use.
See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the
constructor.
* Rename componentWillMount to UNSAFE_componentWillMount 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: CSSTransitionGroupChild, TransitionGroup 

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.
See https://fb.me/react-unsafe-component-lifecycles 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: TransitionGroup

All 4 comments

any update?

yes the release we did a few weeks ago. Please read the changelogs

Still happening on [email protected]

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount 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: CSSTransitionGroupChild, TransitionGroup
r @ backend.js:6
printWarning @ react-dom.development.js:12357
lowPriorityWarningWithoutStack @ react-dom.development.js:12378
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:12542
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:25689
commitRootImpl @ react-dom.development.js:24937
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
commitRoot @ react-dom.development.js:24922
finishSyncRender @ react-dom.development.js:24329
performSyncWorkOnRoot @ react-dom.development.js:24307
(anonymous) @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
scheduleUpdateOnFiber @ react-dom.development.js:23709
dispatchAction @ react-dom.development.js:17076
goToRegister @ index.js:50
async function (async)
goToRegister @ index.js:47
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454
executeDispatch @ react-dom.development.js:584
executeDispatchesInOrder @ react-dom.development.js:609
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:739
runExtractedPluginEventsInBatch @ react-dom.development.js:880
handleTopLevel @ react-dom.development.js:5803
batchedEventUpdates$1 @ react-dom.development.js:24401
batchedEventUpdates @ react-dom.development.js:1415
dispatchEventForPluginEventSystem @ react-dom.development.js:5894
attemptToDispatchEvent @ react-dom.development.js:6010
dispatchEvent @ react-dom.development.js:5914
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
discreteUpdates$1 @ react-dom.development.js:24417
discreteUpdates @ react-dom.development.js:1438
dispatchDiscreteEvent @ react-dom.development.js:5881

Im not sure though if this is caused by [email protected]

Still happening with React 16.13.0.

Warning: componentWillMount has been renamed, and is not recommended for use.
See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the
constructor.
* Rename componentWillMount to UNSAFE_componentWillMount 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: CSSTransitionGroupChild, TransitionGroup 

Warning: componentWillReceiveProps has been renamed, and is not recommended for use.
See https://fb.me/react-unsafe-component-lifecycles 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: TransitionGroup
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mattkrick picture mattkrick  路  4Comments

Medsestrun picture Medsestrun  路  5Comments

lukasreusch picture lukasreusch  路  4Comments

DeyLak picture DeyLak  路  4Comments

Alfrex92 picture Alfrex92  路  4Comments