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.

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

Migrate to new lifecycle methods #9792

Closed
54 tasks done
yesmeck opened this issue Mar 24, 2018 · 107 comments · Fixed by #19643
Closed
54 tasks done

Migrate to new lifecycle methods #9792

yesmeck opened this issue Mar 24, 2018 · 107 comments · Fixed by #19643
Labels
4.x In Ant Design 4.0 help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. 🕙 Plan

Comments

@yesmeck
Copy link
Member

yesmeck commented Mar 24, 2018

React 16.3 will introduce a StrictMode which will fires deprecation warnings for componentWillMount, componentWillUpdate, componentWillReceiveProps. We should migrate antd's components to the new API, react-af can be a good start.

Here is a todo list, if you have interest in helping, drop a comment below.

@afc163
Copy link
Member

afc163 commented Mar 24, 2018

16.3

@yesmeck yesmeck changed the title Support React 1.6.3 Support React 16.3 Mar 24, 2018
@yesmeck yesmeck changed the title Support React 16.3 Support React 16.3 StrictMode Mar 24, 2018
@yesmeck
Copy link
Member Author

yesmeck commented Mar 28, 2018

@yesmeck
Copy link
Member Author

yesmeck commented Mar 28, 2018

@yesmeck yesmeck added the help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. label Mar 30, 2018
@chenshuai2144
Copy link
Contributor

正在在搞 select

我要 select

@saostad
Copy link

saostad commented Apr 4, 2018

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

@yesmeck
Copy link
Member Author

yesmeck commented Apr 5, 2018

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

@zombieJ
Copy link
Member

zombieJ commented Apr 6, 2018

count me on Tree ~

@yesmeck yesmeck changed the title Support React 16.3 StrictMode Migrate to new lifecycle methods Apr 9, 2018
@yesmeck
Copy link
Member Author

yesmeck commented Apr 9, 2018

reactjs/rfcs#40

@Rohanhacker
Copy link
Contributor

Can I work on datepicker and modal ?? @yesmeck

@picodoth
Copy link
Contributor

I'll be working on menu

@yesmeck
Copy link
Member Author

yesmeck commented Apr 13, 2018

@Rohanhacker Of course.

@jzhng
Copy link
Contributor

jzhng commented Apr 18, 2018

on Tabs

@klymenko-serhii
Copy link

klymenko-serhii commented Apr 21, 2018

ill try dropdown

@paranoidjk
Copy link
Contributor

More version detect and compatibility code....

@picodoth
Copy link
Contributor

taking tabs

@viztor
Copy link
Contributor

viztor commented Jul 15, 2018

interested in message. @yesmeck

yesmeck pushed a commit that referenced this issue Jul 19, 2018
…picker

First of all, thank you for your contribution! :-)

Please makes sure that these checkboxes are checked before submitting your PR, thank you!

* [x] Make sure that you propose PR to right branch: bugfix for `master`, feature for latest active branch `feature-x.x`.
* [x] Make sure that you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
* [x] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
* [x] Rebase before creating a PR to keep commit history clear.
* [x] Add some descriptions and refer relative issues for you PR.

Extra checklist:

**if** *isBugFix* **:**

no
**elif** *isNewFeature* **:**

#9792
@ahsan-naveed
Copy link

Hi, is this still in progress❓

@yesmeck
Copy link
Member Author

yesmeck commented Jul 28, 2018

@ahsannaveed007 yes

@tnduc
Copy link

tnduc commented Nov 11, 2019

Screenshot from 2019-11-11 14-37-51
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"
  },

@orzyyyy orzyyyy unpinned this issue Nov 11, 2019
@jackiehluo
Copy link

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

@blushingpenguin
Copy link

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)

@damiangreen
Copy link
Contributor

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

@pavolgolias
Copy link

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

@IsaaX
Copy link

IsaaX commented Nov 20, 2019

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

@pavolgolias
Copy link

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.

@afc163
Copy link
Member

afc163 commented Nov 25, 2019

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?

@Indigo744
Copy link

@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

@zombieJ
Copy link
Member

zombieJ commented Dec 2, 2019

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

afc163 referenced this issue in react-component/trigger Dec 2, 2019
@blushingpenguin
Copy link

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"

@Indigo744
Copy link

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?

afc163 added a commit to react-component/tree-select that referenced this issue Dec 2, 2019
@pavolgolias
Copy link

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

afc163 added a commit to react-component/calendar that referenced this issue Dec 25, 2019
afc163 added a commit to react-component/calendar that referenced this issue Dec 25, 2019
afc163 added a commit to react-component/calendar that referenced this issue Dec 25, 2019
afc163 added a commit to react-component/calendar that referenced this issue Dec 25, 2019
afc163 added a commit to react-component/calendar that referenced this issue Dec 25, 2019
@Sparkenstein
Copy link

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

@boriscy
Copy link

boriscy commented Jun 18, 2020

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

@shmaram
Copy link

shmaram commented Aug 20, 2020

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

image

@xeontem
Copy link

xeontem commented Oct 2, 2020

same for me. Should we reopen the ticket?

Cheetah0723 added a commit to Cheetah0723/Calendar that referenced this issue Nov 7, 2021
Superdev0103 added a commit to Superdev0103/react-input-number that referenced this issue Jan 3, 2023
brainy989 added a commit to brainy989/checkbox that referenced this issue Jul 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
4.x In Ant Design 4.0 help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. 🕙 Plan
Projects
None yet
Development

Successfully merging a pull request may close this issue.