Ant-design: Migrate to new lifecycle methods

16.3

https://github.com/reactjs/react-lifecycles-compat

Update on Async Rendering

正在在搞 select

我要 select

Guys I am using antd in one of my projects and it's awesome, How can I do anything regarding to this issue
?

@saostad You can pick up a component, and rewrite the legacy lifecycle methods with the new lifecycle method, see this PR https://github.com/react-component/table/pull/198 as a example.

count me on Tree ~

https://github.com/reactjs/rfcs/pull/40

Can I work on datepicker and modal ?? @yesmeck

I'll be working on menu

@Rohanhacker Of course.

on Tabs

ill try dropdown

More version detect and compatibility code....

taking tabs

interested in message. @yesmeck

Hi, is this still in progress❓

@ahsannaveed007 yes

ahh, is there anyway to prevent the legacy error pops in the console before this all finishing, seems like the progress is abit slow :(
i cant update to the latest and use new features like drawer as it pop me a lots of error.

@dayrlism10 What's the error?

@dayrlism10 Are you using <StrictMode>?

yes im using strict mode.

You can help us move to the new lifecycle methods if you want to use strict mode.

can i know how to do so please?

Contributing guide https://ant.design/docs/react/contributing
New lifecycle methods https://reactjs.org/blog/2018/03/29/react-v-16-3.html
Example pull request https://github.com/ant-design/ant-design/pull/10309

@boostio funded this issue with $30. Visit this issue on Issuehunt

Hi, Can I work on Rate? @yesmeck

I think that alert has nothing to migrate

@natanielcz has started working. Visit this issue on Issuehunt

I try to rewrite all of them. Are our tests covering component lifecycle?

@natanielcz You can see coverage here https://codecov.io/gh/ant-design/ant-design

@Kexin-Li It's yours.

@yesmeck @natanielcz The tests right now are not enough to cover all the migration, you'd better add necessary tests before rewrite.

@yesmeck According to my knowledge of the repo, (not in rc-components), 22 components could be fast-forward. see

The list above includes rc-components, we'd have to rewrite both rc-components and antd componentns.

Updated the list.

I will create PR for each component so You could decide when to merge specific change.
And It also will be easier to review smaller chunks of code.

Autocomplete, Carousel, Collapse, Form, InputNumber, Message, Modal, Notification, Pagination, Progress, Slider, Spin, Switch, Tabs and Timeline don't require migration.

EDIT: Components left to migrate for now: Input, LocaleProvider, Mention, Radio, Transfer

EDIT 2: I see that listed component may require changes in react-component library. Is that also the object of this issue?

Is there anything left that needs migrating?

Yeap. There are still components to migrate. I'm waiting for approval of first 5 and then I plan to continue work on this bug. If you want to help start from the end of the list above :)

Rate is done.

maybe we should wait for version 17 or hooks ??

maybe we should wait for version 17 or hooks ??

these changes required for almost all new features, specially for React lazy, Suspense and Concurrent React.

Migrating transfer is tricky because componentWillReceiveProps refers to an instance property splitedDataSource which is used for caching..

Migrating mention, the test 'change suggestions' here has a problem in that wrapper.setState doesn't set the state correctly when a new getDerivedStateFromProps method is introduced.

Looking closer at this test I'm wondering how useful is, because wrapper.setState is simulating an internal change, not an operation the user could ever do. The Suggestions array should only be changed by modifying props. @afc163 do you have any thoughts about changing this test to remove wrapper.setstate()?

@0maxxam0 funded this issue with $20. See it on IssueHunt

@damiangreen has submitted pull request. See it on IssueHunt

If the PRs above are merged there is one component left to migrate (transfer). Out of curiosity does anyone know how you submit multiple PRs to issuehunt?
@yesmeck @afc163 , any plans to merge the PRs?

Cascader is done

@zombieJ they are all done, except transfer, can you merge the PRs above?

I'll try Button.

I am suppose to be more patient.

@zy410419243 @natanielcz has already done this one. We're just waiting on the maintainers to accept the PRs. @zombieJ: cascader has also already been done.. it just requires merging:

Anchor: https://github.com/ant-design/ant-design/pull/12749
Calendar: https://github.com/ant-design/ant-design/pull/12750
Button: https://github.com/ant-design/ant-design/pull/12752

Only one remaining is transfer

@damiangreen, thanks for tips. Let me check.

@zombieJ, @afc163 what woudl it take to become a member/ mantainer. It seems you guys are super busy with so many pull requests and a few of us would be happy to help out?

@damiangreen Maybe you need this.

@damiangreen You may start with reviewing some PRs and replying in recent issues.

@afc163 , i have replied on many recent issues. this one in particular. I don't have right to accept PRs yet

@boostio has cancelled funding for this issue.(Cancelled amount: $30.00) See it on IssueHunt

@0maxxam0 has cancelled funding for this issue.(Cancelled amount: $20.00) See it on IssueHunt

Any progress? 😅

After Updated to React 16.9.0, I've got following warnings.

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks 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: Tabs

Any progress?

After I Updated React 16.9.0, I've got following warnings.

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks 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: Tabs

AntForm is having same warnings

Table also have this warnings after update react to 16.9

Hey, @afc163!
Can't we just run npx react-codemod rename-unsafe-lifecycles in antd project, or manually add prefix UNSAFE_ for all unsafe methods, as said here to get rid of warnings?

PR is welcome guys~

react-slick: https://github.com/ant-design/ant-design/pull/18209/commits/b0cc0f7019f069d7a7c6a296ccc7ada3591c647d

Any progress?
After I Updated React 16.9.0, I've got following warnings.

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks 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: Tabs

AntForm is having same warnings

this problem will only happen to react v16.9
through source code

react v16.8.6
export const warnAboutDeprecatedLifecycles = false;

react v16.9.0
export const warnAboutDeprecatedLifecycles = true;

So the best solution now is to use react v16.8.6

https://weibo.com/1651843872/I2kqHzjDJ

react-component/collapse#129

migrate lifecycle method with collapse component. any review ?

为什么不使用 react 推荐的 npx react-codemod rename-unsafe-lifecycles 修改呢？

@XianZhengquan 治标不治本

@chenshuai2144 所以，现在你们是在慢慢的修改生命周期吗？ componentWillMount => componentDidMount ?

@XianZhengquan 你可以看一下写完的，其实都是重写组件，工作量还挺大的

@chenshuai2144 辛苦！4.0 预计什么时候完工呢？

ouch. This looks messy. Are we blocked from using React 16.9 or can we ignore warning?

@Stephen2 , we are working on the 4.0 which will all use new life cycle method. For current 3.x, may more wish social volunteer to help on this.

Any progress?
After I Updated React 16.9.0, I've got following warnings.

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks 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: Tabs

AntForm is having same warnings

this problem will only happen to react v16.9
through source code

react v16.8.6
export const warnAboutDeprecatedLifecycles = false;

react v16.9.0
export const warnAboutDeprecatedLifecycles = true;

So the best solution now is to use react v16.8.6

excellent

@Stephen2 , we are working on the 4.0 which will all use new life cycle method. For current 3.x, may more wish social volunteer to help on this.

most of the users are relying on 3.x. maybe it's better to put a little effort on 3.x to fix emergency problems like this to make sure the story of Angular 2 does not happen for this library.
The angular team was very excited to just go ahead and publish their new awesome thing, but people need reliability first!

Animate is also throwing this error

form 在新建一个独立的form组件，会有newlifecycle警告

rc-animate in the new version 2.10 they're using the react-lifecycles-compat that will remove the warning and polyfill the component with life cycles deprecated. You guys tried this?

Hey man, is this react lifecycle methods still in progress ?

I want to use this library in my application, but i want this warnings fixeds because the project is to big and we cant handle this warnings in next version of react :(

Has anyone found a way to suppress these warnings (temporarily) in their project while they wait on these fixes? They're adding so much noise to our tests right now.

@jackiehluo and others
While waiting for the fixes, you can do the following to hide JUST these warnings :

const doWarn = window.console.warn
window.console.warn = (...args) => {
  if(typeof args[0] !== 'string' || !args[0].startsWith('Warning: componentWillReceiveProps has been renamed'))
    doWarn(...args)
  // Uncomment the following line if you still want a little reminder :
  // else doWarn('Oh, yeah, that warning again.')
}

(No need to dislike, I know this is ugly 😂)

@jackiehluo and others
While waiting for the fixes, you can do the following to hide JUST these warnings :

const doWarn = window.console.warn
window.console.warn = (...args) => {
  if(typeof args[0] !== 'string' || !args[0].startsWith('Warning: componentWillReceiveProps has been renamed'))
    doWarn(...args)
  // Uncomment the following line if you still want a little reminder :
  // else doWarn('Oh, yeah, that warning again.')
}

Hi, where i can paste this code ?

Animate Animate Animate Animate Animate Animate

Come on !

may more wish social volunteer to help on this.

As a volunteer, I tried and gave up migrating Animate. 🤣

In favor of react-component/form#355 and react-component/animate#82, we finally fixed all react lifecycle warnings!!! ✌️😊🎉 There is no warnings anymore now, thx to all contributors and your effects have made in this issue. 🤝

ref https://github.com/ant-design/ant-design/pull/19643

How to fix it?

"dependencies": {
    "@ant-design/colors": "^3.1.0",
    "@ant-design/pro-layout": "^4.5.16",
    "@antv/data-set": "^0.10.2",
    "antd": "^3.23.6",
    "classnames": "^2.2.6",
    "dva": "^2.4.1",
    "lodash": "^4.17.11",
    "lodash.debounce": "^4.0.8",
    "moment": "^2.24.0",
    "numeral": "^2.0.6",
    "omit.js": "^1.0.2",
    "path-to-regexp": "^3.1.0",
    "qs": "^6.9.0",
    "react": "^16.8.6",
    "react-copy-to-clipboard": "^5.0.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.8.6",
    "react-fittext": "^1.0.0",
    "redux": "^4.0.1",
    "slash2": "^2.0.0",
    "to": "^0.2.9",
    "umi": "^2.11.3",
    "umi-plugin-pro-block": "^1.3.4",
    "umi-plugin-react": "^1.10.1",
    "umi-request": "^1.2.7",
    "update": "^0.7.4",
    "webpack-theme-color-replacer": "^1.2.15"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^1.0.13",
    "@types/classnames": "^2.2.7",
    "@types/express": "^4.17.0",
    "@types/history": "^4.7.2",
    "@types/jest": "^24.0.13",
    "@types/lodash": "^4.14.144",
    "@types/qs": "^6.5.3",
    "@types/react": "^16.8.19",
    "@types/react-document-title": "^2.0.3",
    "@types/react-dom": "^16.8.4",
    "@umijs/fabric": "^1.2.0",
    "chalk": "^2.4.2",
    "check-prettier": "^1.0.3",
    "cross-env": "^6.0.0",
    "cross-port-killer": "^1.1.1",
    "enzyme": "^3.9.0",
    "eslint": "5.16.0",
    "express": "^4.17.1",
    "gh-pages": "^2.0.1",
    "husky": "^3.0.0",
    "import-sort-cli": "^6.0.0",
    "import-sort-parser-babylon": "^6.0.0",
    "import-sort-parser-typescript": "^6.0.0",
    "import-sort-style-module": "^6.0.0",
    "jest-puppeteer": "^4.2.0",
    "lint-staged": "^9.0.0",
    "mockjs": "^1.0.1-beta3",
    "netlify-lambda": "^1.4.13",
    "node-fetch": "^2.6.0",
    "prettier": "^1.17.1",
    "pro-download": "1.0.1",
    "serverless-http": "^2.0.2",
    "stylelint": "^10.1.0",
    "umi-plugin-ga": "^1.1.3",
    "umi-plugin-pro": "^1.0.2",
    "umi-types": "^0.5.0"
  },

@afc163 Does the latest release (3.25.1) include this fix?

make sure you update all of the dependencies of ant too as a number of the fixes are in external components (rc-form, rc-animate, etc)

Ah yes, you're right , the final thing i had to do was change react-dom to "react-dom": "npm:@hot-loader/react-dom", to get rid of the final table warnings

@afc163 - I updated completely all dependencies in project and I still got warnings for some components: Redirect, Trigger.
Did I forget something?

@pavolgolias i was receiving the same result as you. To fix it, in my yarn.lock file I deleted all the rc-* components since they were out of date and forced them to be reinstalled with latest versions (cautious with this approach, I have specs so everything works as before for me)

I deleted package-lock.json and all node_modules, reinstalled the dependencies but I got still the same result. I suppose I am going to wait for new releases of rc-* components (not the beta ones) and for update of antd required components list @afc163.

I suppose I am going to wait for new releases of rc-* components (not the beta ones) and for update of antd required components list

Current rc-* components have already resolved react lifecycle warning now. If you still meet this problem, could you provide a reproducible repo and steps to reproduce?

@pavolgolias @afc163 the offending component is actually TreeSelect.

I went ahead and made a repo from scratch (with create-react-app): https://github.com/Indigo744/antdesign-react-lifecycle-issue

Thank you

@Indigo744 , thanks for report. Updated, please check.

There are some duplicate components required with these fixes -- they don't seem to cause any issues, but multiple copies of rc-animate, rc-tree and rc-trigger are now required:

antd 3.2.6 references:
rc-animate "^2.10.2"
rc-tree-select "~2.9.1"
rc-trigger "^2.6.2"
rc-tree "~2.1.0"

rc-tree-select@~2.9.1 references:
rc-trigger "^3.0.0-rc.2"

rc-trigger@^3.0.0-rc.2 references:
rc-animate "^3.0.0-rc.1"

rc-tree-select@~2.9.1 references:
rc-tree "~2.0.0"

Thank you @zombieJ @afc163 I can confirm the warning is gone 😸

However, the remarks from @blushingpenguin is interesting. If multiple version are used, does this mean a larger bundle size?

Thanks for the update. I got still one warning left, but I found out it is another lib and not the antd.

Reading through the comments and status it looks like all the components have migrated, But I am still getting the same warning for InnerSlider and Slider components. attaching log and screenshot below

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: InnerSlider, Slider

And

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. 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

Please update the following components: InnerSlider

I am using React 16.13.1 and AntD 4.3.3

Reading through the comments and status it looks like all the components have migrated, But I am still getting the same warning for InnerSlider and Slider components. attaching log and screenshot below

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: InnerSlider, Slider

And

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. 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

Please update the following components: InnerSlider

I am using React 16.13.1 and AntD 4.3.3

Same problem with Modal and antd 4.3.4

Same problem still with React 16.13.1 and AndD 4.5.4
is there any plan to fix this?

same for me. Should we reopen the ticket?