componentWillMount usage in loadable.js is deprecated in react 16.9.0

[tm1000]

Bug report

Describe the bug

Starting in React 16.9.0 using 'componentWillMount' issues a deprecation warning because it has been renamed to UNSAFE_componentWillMount. Instead it is suggested to use componentDidMount.

This was discovered by using dynamic imports with react 16.9.0 (Released yesterday) and nextjs 9.0.3

Full error is

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks 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: LoadableComponent

Code Reference:
https://github.com/zeit/next.js/blob/master/packages/next-server/lib/loadable.js#L174

To Reproduce

npm install react react-dom next

Then just add a dynamic import

import React from 'react';
const DynamicComponent = dynamic(() => import(`./file`), {
	loading: () => '<div>Loading Component</div>',
});
function TestComponent() {
	return <DynamicComponent />
}
export default TestComponent;

Expected behavior

loadable.js should be fixed to either work with componentDidMount (See comment below) or UNSAFE_componentWillMount

Screenshots

System information

• Version of Next.js: 9.0.3

[tm1000]

I attempted to change componentWillMount to componentDidMount and it worked however there was an error in the console

Warning: Prop style did not match. Server: "null" Client: "fill:grey;height:inherit;width:25%"

(client styles probably have something to do with my Loading Component but the warning doesn't show up when using componentWillMount or UNSAFE_componentWillMount)

changing componentWillMount to UNSAFE_componentWillMount is another alternative but I leave that up to the NextJS team to figure out...

[Timer]

Thanks for the heads up!

[tm1000]

Thinking more about this, because of SSR I think UNSAFE_componentWillMount will have to be used so that client and server styles match because componentDidMount doesn't happen server-side where-as componentWillMount does. (and alternatively UNSAFE_)

[timneutkens]

We'll have to rewrite the component a bit, initially just change it to UNSAFE_ 👍

[infodusha]

We'll have to rewrite the component a bit, initially just change it to UNSAFE_ 👍

Bad idea, UNSAFE_* would be removed in the next react versions(from offictial blog)

[timneutkens]

It's not a bad idea and we're fully aware of changes that will be made to React eventually, also note that this would only be removed in React 17, which doesn't have a release date as of today.

Like I said:

We'll have to rewrite the component a bit, initially just change it to UNSAFE_ 👍

Notice the initially. I did not say we would leave it at that.

[tm1000]

Partially fixed with #8357 (it was unlinked so as this wont close)