Refactor away from React UNSAFE_* lifecycle methods

[flootr]

Details

We want to refactor away from React UNSAFE_* lifecycle methods. While this project has been going on for a while we want to track any remaining occurrences here to make sure we don't loose oversight. At the time of this writing there are ~180 of those unsafe lifecycle methods left.

If you need a review or have any questions, please don't hesitate to ping @Automattic/team-calypso-frameworks. It may also be helpful to look into React component documentation to look up with what you might want to replace an unsafe method and/or look at previous refactoring PRs (e.g. #58232, #58232).

Checklist

• client/login/magic-login/handle-emailed-link-form.jsx HandleEmailedLinkForm: refactor away from UNSAFE_* #61163
• client/login/magic-login/request-login-email-form.jsx Remove Lodash from client/login #60285
• client/login/wp-login/index.jsx Login: refactor away from UNSAFE_* #61165
• apps/notifications/src/panel/templates/index.jsx
• apps/notifications/src/panel/templates/empty-message.jsx - @tyxla Notifications: Refactor EmptyMessage away from UNSAFE_ methods #63276
• apps/notifications/src/panel/templates/image-loader.jsx - @tyxla Notifications: Refactor ImageLoader away from UNSAFE_ methods #63277
• apps/notifications/src/panel/templates/status-bar.jsx
• apps/notifications/src/panel/templates/note-list.jsx
• apps/notifications/src/panel/Notifications.jsx
• client/jetpack-connect/search.jsx - @tyxla Jetpack Search: Refactor away from UNSAFE_ methods #59440
• client/jetpack-connect/main.jsx - @tyxla Jetpack Connect: Migrate JetpackConnectMain away from UNSAFE_ methods #59169
• client/jetpack-connect/signup.js - @tyxla Jetpack Connect: Refactor JetpackSignup away from UNSAFE_ methods #61117
• client/jetpack-connect/remote-credentials.js @flootr OrgRemoteCredentials: refactor away from UNSAFE_* #61541
• client/jetpack-connect/sso.jsx JetpackSsoForm: refactor away from UNSAFE_* #62758
• client/jetpack-connect/authorize.js
• client/post-editor/editor-revisions/dialog.jsx - @tyxla Editor: Refactor PostRevisionsDialog away from UNSAFE_ methods #60484
• client/post-editor/editor-diff-viewer/index.jsx - @tyxla Editor: Refactor EditorDiffViewer away from UNSAFE_ methods #63172
• client/lib/analytics/track-component-view/index.jsx - @tyxla Analytics: Migrate TrackComponentView away from UNSAFE_ methods #58860
• client/lib/url-search/index.js
• client/lib/with-dimensions/index.jsx - @tyxla Reader: Refactor withDimensions away from UNSAFE_ methods #63441
• client/post-editor/media-modal/detail/detail-preview-image.jsx @flootr EditorMediaModalDetailPreviewImage: refactor away from UNSAFE_* #61234
• client/post-editor/media-modal/index.jsx
• client/post-editor/media-modal/gallery/index.jsx @flootr EditorMediaModalGallery: refactor away from UNSAFE_* #62658
• client/post-editor/media-modal/detail/detail-preview-videopress.jsx @flootr MediaModal: refactor video editing related cmps away from UNSAFE_* #62586
• client/post-editor/media-modal/detail/detail-fields.jsx @flootr EditorMediaModalDetailFields: refactor away from UNSAFE_* #62568
• client/me/help/help-contact-form/index.jsx
• client/me/help/help-courses/index.jsx @tyxla Help: Cleanup courses of unnecessary state #58857
• client/me/application-passwords/index.jsx @flootr Migrate App Passwords from Redux to React Query #61562
• client/me/concierge/reschedule/calendar-step.js @flootr Concierge: Refactor CalendarStep away from UNSAFE_ methods #61814
• client/me/concierge/book/calendar-step.js @flootr Concierge: Refactor CalendarStep away from UNSAFE_ methods #61814
• client/me/purchases/confirm-cancel-domain/index.jsx @flootr ConfirmCancelDomain: refactor away from UNSAFE_* #62732
• client/me/purchases/cancel-purchase/index.jsx @brookewp Purchases: Refactor CancelPurchase away from UNSAFE_ methods #61828
• client/me/purchases/manage-purchase/index.jsx - @tyxla Purchases: Refactor ManagePurchase away from UNSAFE_ methods #60456
• client/components/token-field/index.jsx
• client/components/language-picker/index.jsx
• client/components/checklist/checklist.js - @tyxla Components: Refactor Checklist away from UNSAFE_ methods #60289
• client/components/async-load/index.jsx
• client/components/post-schedule/index.jsx - @tyxla Components: Refactor PostSchedule away from UNSAFE_ methods #62220
• client/components/post-schedule/docs/example.jsx - @tyxla Components: Refactor PostSchedule away from UNSAFE_ methods #62220
• client/components/data/query-users-suggestions/index.jsx @flootr QueryUsersMentions: refactor away from UNSAFE_* #60337
• client/components/data/query-theme/index.jsx @flootr QueryTheme: refactor away from UNSAFE_* #59979
• client/components/data/query-plugin-keys/index.jsx @flootr QueryPluginKeys: refactor away from UNSAFE_* #59982
• client/components/data/query-keyring-connections/index.jsx @flootr QueryKeyringConnections: refactor away from UNSAFE_* #59990
• client/components/data/query-site-guided-transfer/index.jsx @tyxla Guided Transfer: Remove from this world #60011
• client/components/data/query-post-stats/index.jsx QueryPostStats: refactor away from UNSAFE_* #60026
• client/components/data/query-jetpack-plugins/index.jsx QueryJetpackPlugins: refactor away from UNSAFE_* #60025
• client/components/data/query-contact-details-cache/index.jsx QueryContactDetailsCache: refactor away from UNSAFE_* #60034
• client/components/data/document-head/index.jsx - @tyxla Components: Refactor DocumentHead away from UNSAFE_ methods #60949
• client/components/data/query-keyring-services/index.jsx - @tyxla QueryKeyringServices: Migrate away from UNSAFE_ methods #58753
• client/components/data/query-reader-lists/index.jsx - @tyxla Reader: Refactor QueryReaderLists away from UNSAFE_ React lifecycle methods #60434
• client/components/data/query-reader-feed/index.jsx @flootr QueryReaderFeed: refactor away from UNSAFE_* #60660
• client/components/data/query-posts/index.jsx @flootr QueryPosts: refactor away from UNSAFE_* #60532
• client/components/data/query-post-likes/index.jsx @flootr QueryPostLikes: refactor away from UNSAFE_* #61152
• client/components/data/query-concierge-appointment-details/index.js @flootr QueryConciergeAppointmentDetails: refactor away from UNSAFE_* #60669
• client/components/data/query-support-article-alternates/index.jsx @flootr QuerySupportArticleAlternates: refactor away from UNSAFE_* #60396
• client/components/data/query-reader-site/index.jsx @flootr QueryReaderSite: refactor away from UNSAFE_* #60488
• client/components/data/query-post-types/index.jsx @flootr QueryPostTypes: refactor away from UNSAFE_* #60492
• client/components/data/query-plans/index.jsx - @tyxla QueryPlans: Migrate away from UNSAFE_ methods #58757
• client/components/data/query-site-monitor-settings/index.jsx - @tyxla Site Settings: Refactor Monitor settings to react-query and remove UNSAFE methods #60439
• client/components/data/query-jetpack-user-connection/index.jsx - @tyxla Framework: Refactor QueryJetpackUserConnection away from UNSAFE_ methods #60960
• client/components/data/query-reader-tag-images/index.jsx @flootr QueryReaderTagImages: refactor away from UNSAFE_* #60670
• client/components/data/query-user-connection/index.jsx - @jsnajdr Migrate wpcom.undocumented().jetpackIsUserConnected() to wpcom.req #58943
• client/components/data/query-reader-thumbnails/index.jsx - @tyxla Reader: Refactor QueryReaderThumbnails away from UNSAFE_ methods #60667
• client/components/data/query-rewind-backup-status/index.js - @tyxla Activity Log: Refactor QueryRewindBackupStatus away from UNSAFE_ methods #61115
• client/components/data/moderate-comment/index.jsx - @tyxla Comments: Refactor ModerateComment away from UNSAFE_ lifecycle methods #60961
• client/components/data/media-list-data/index.jsx - @tyxla Media: Refactor MediaListData away from UNSAFE_ methods #60991
• client/components/keyed-suggestions/index.jsx @flootr
• client/components/jetpack/with-server-credentials-form/index.jsx
• client/components/input-chrono/index.jsx
• client/components/web-preview/content.jsx - @tyxla Components: Refactor WebPreview away from UNSAFE_ lifecycle methods #60663
• client/components/web-preview/component.jsx - @tyxla Components: Refactor WebPreview away from UNSAFE_ lifecycle methods #60663
• client/components/image/index.js - @tyxla Components: Refactor Image away from UNSAFE_ methods #62103
• client/components/search/index.jsx
• client/components/infinite-list/index.jsx
• client/components/rewind-credentials-form/index.jsx
• client/components/track-input-changes/index.jsx - @tyxla Components: Refactor TrackInputChanges away from UNSAFE_ methods #60995
• client/components/locale-suggestions/index.jsx - @tyxla Components: Migrate LocaleSuggestions away from UNSAFE_ methods #59004
• client/components/foldable-card/index.jsx
• client/components/title-format-editor/index.jsx
• client/components/forms/form-phone-input/index.jsx - @tyxla Components: Refactor away from UNSAFE_ in FormPhoneInput #58997
• client/components/forms/sortable-list/index.jsx - @tyxla Components: Refactor SortableList away from UNSAFE_ methods #61574
• client/components/domains/registrant-extra-info/fr-form.jsx - @tyxla Domains: Refactor RegistrantExtraInfoFrForm away from UNSAFE_ methods #62256
• client/components/domains/registrant-extra-info/with-contact-details-validation.jsx @tyxla Domains: Remove unused TLD validation schemas #58396
• client/components/domains/registrant-extra-info/uk-form.jsx - @tyxla Domains: Refactor RegistrantExtraInfoUkForm away from UNSAFE_ methods #62255
• client/components/domains/contact-details-form-fields/index.jsx - @tyxla Domains: Refactor ContactDetailsFormFields away from UNSAFE_ methods #62257
• client/components/domains/trademark-claims-notice/index.jsx - @tyxla Domains: Refactor TrademarkClaimsNotice away from UNSAFE_ methods #62850
• client/components/domains/transfer-domain-step/index.jsx
• client/components/domains/transfer-domain-step/transfer-domain-precheck.jsx
• client/components/domains/register-domain-step/index.jsx
• client/components/section-nav/index.jsx
• client/components/social-buttons/facebook.js - @tyxla Components: Remove unused Facebook button and icon #58760
• client/my-sites/post-type-list/max-pages-notice.jsx - @flootr PostTypeListMaxPagesNotice: refactor away from UNSAFE_* #59121
• client/my-sites/post-type-list/index.jsx
• client/my-sites/customize/main.jsx - @tyxla Customize: Refactor away from UNSAFE_ lifecycle methods #63963
• client/my-sites/earn/ads/form-settings.jsx - @edanzer Earn: Refactor ad settings to functional component #81048
• client/my-sites/themes/themes-selection.jsx - @tyxla Themes: Refactor ThemesSelectionWithPage away from UNSAFE_ methods #62135
• client/my-sites/stats/stats-module/index.jsx - @tyxla Stats: Refactor StatsModule away from UNSAFE_ methods #62155
• client/my-sites/themes/theme-upload/index.jsx
• client/my-sites/themes/theme-preview.jsx
• client/my-sites/email/email-forwarding/email-forwarding-add-new.jsx - @stephanethomas Emails: Remove former Email Forwarding page #61572
• client/my-sites/store/app/store-stats/referrers/index.js - @tyxla WooCommerce: Remove disabled store referrers stats #60083
• client/my-sites/store/app/store-stats/store-stats-module/index.js - @tyxla Stats: Refactor StoreStatsModule away from UNSAFE_ lifecycle methods #60946
• client/my-sites/store/app/store-stats/store-stats-referrer-widget-base/index.js - @tyxla WooCommerce: Remove disabled store referrers stats #60083
• client/my-sites/pages/page-list.jsx - @flootr PageList: refactor away from UNSAFE_* #61314
• client/my-sites/post-selector/selector.jsx - @tyxla Components: Remove unused PostSelector component #63664
• client/my-sites/store/components/d3/base/index.js - @tyxla Store: Refactor D3Base away from UNSAFE_ methods #63666
• client/my-sites/resume-editing/index.jsx - @tyxla Editor: Remove unused ResumeEditing component and last draft state #60295
• client/my-sites/site-settings/date-time-format/index.jsx - @tyxla Site Settings: Refactor DateTimeFormat away from UNSAFE_ methods #63443
• client/my-sites/site-settings/jetpack-sync-panel/index.jsx - @tyxla Site Settings: Migrate JetpackSyncPanel away from UNSAFE_ methods #58764
• client/my-sites/site-settings/form-jetpack-monitor.jsx - @tyxla Site Settings: Refactor Monitor settings to react-query and remove UNSAFE methods #60439
• client/my-sites/site-settings/seo-settings/main.jsx @flootr SeoSettingsMain: Refactor away from UNSAFE_* #59107
• client/my-sites/site-settings/seo-settings/form.jsx @flootr SiteSettingsSeoFrom: refactor away from UNSAFE_cWRP #59940
• client/my-sites/site-settings/seo-settings/site-verification.jsx @flootr
• client/my-sites/site-settings/wrap-settings-form.jsx - @tyxla Settings: Refactor away from UNSAFE_ methods in wrapSettingsForm #60045
• client/my-sites/plan-features/index.jsx - @tyxla Plans: Migrate PlanFeatures away from UNSAFE_ methods #60389
• client/my-sites/marketing/buttons/tray.jsx
• client/my-sites/marketing/connections/services/slack.js
• client/my-sites/marketing/connections/services/instagram.jsx
• client/my-sites/marketing/connections/services/google-photos.js
• client/my-sites/marketing/connections/services/google-my-business.js
• client/my-sites/marketing/connections/services/mailchimp.js
• client/my-sites/marketing/connections/inline-connection-action.jsx
• client/my-sites/marketing/connections/service.jsx
• client/my-sites/preview/main.jsx - @tyxla Preview: Refactor away from UNSAFE_ methods #60044
• client/my-sites/exporter/export-card/index.jsx - @tyxla Export: Refactor away ExportCard from UNSAFE_ methods #60298
• client/my-sites/people/people-invites/invites-list-end.jsx - @flootr InvitesListEnd: refactor away from UNSAFE_* #58907
• client/my-sites/people/people-invite-details/index.jsx - @flootr PeopleInviteDetails: refactor away from UNSAFE_* #59106
• client/my-sites/people/invite-people/index.jsx - @flootr InvitePeople: refactor away from UNSAFE_* #59118
• client/my-sites/theme/main.jsx - @tyxla Themes: Refactor ThemeSheet away from UNSAFE_ lifecycle methods #60084
• client/my-sites/checkout/checkout-thank-you/index.jsx - @tyxla Checkout: Refactor CheckoutThankYou away from UNSAFE_ methods #62851
• client/my-sites/plan-features-comparison/index.jsx - @tyxla Plans: Migrate PlanFeaturesComparison away from UNSAFE_ methods #60387
• client/my-sites/purchase-product/search.jsx - @tyxla Jetpack Search: Refactor away from UNSAFE_ methods #59440
• client/my-sites/plugins/plugin.jsx - @tyxla Plugins: Migrate SinglePlugin away from UNSAFE_ methods #58850
• client/my-sites/plugins/plugins-browser/index.jsx - @WBerredo Turn PluginsBrowser into a functional component #59019
• client/my-sites/plugins/main.jsx - @tyxla Plugins: Refactor PluginsMain away from UNSAFE_ methods #61571
• client/my-sites/plugins/plugin-upload/index.jsx
• client/my-sites/plugins/plugin-automated-transfer/index.jsx - @tyxla Plugins: Remove legacy unused components #60244
• client/my-sites/picker/picker.jsx
• client/my-sites/woocommerce/dashboard/required-plugins-install-view.jsx - @allilevine WooCommerce Installer: remove unused code #60784
• client/my-sites/domains/map-domain/index.jsx MapDomain: refactor away from UNSAFE_* #61236
• client/my-sites/domains/domain-search/site-redirect.jsx SiteRedirect: refactor away from UNSAFE_* #61239
• client/my-sites/domains/transfer-domain/index.jsx TransferDomain: refactor away from UNSAFE_* #61241
• client/my-sites/domains/components/form/state-select.jsx - @tyxla Domains: Refactor StateSelect away from UNSAFE_ methods #60449
• client/my-sites/domains/domain-search/index.jsx - @tyxla Domains: Refactor DomainSearch away from UNSAFE_ methods #60453
• client/my-sites/domains/components/domain-warnings/index.jsx DomainWarnings: refactor away from UNSAFE_* #61242
• client/my-sites/domains/domain-management/dns/dns-add-new.jsx @flootr DnsAddNew: refactor away from UNSAFE_* #62689
• client/my-sites/domains/domain-management/site-redirect/index.jsx SiteRedirect: refactor away from UNSAFE_* #62551
• client/my-sites/domains/domain-management/name-servers/index.jsx - @leonardost Domains: Remove old NameServers component #62626
• client/my-sites/comments/comment-list/index.jsx - @flootr CommentList: refactor away from UNSAFE_* #61311
• client/my-sites/comments/comment/index.jsx
• client/my-sites/comments/comment/comment-html-editor/add-link-dialog.jsx - @tyxla Comments: Refactor AddLinkDialog away from UNSAFE_ methods #61570
• client/signup/steps/site-picker/site-picker-submit.jsx @flootr
• client/signup/steps/site/index.jsx - @tyxla Signup: Refactor away Site step from UNSAFE_ methods #64408
• client/signup/steps/rewind-migrate/index.jsx
• client/signup/steps/user/index.jsx - @jsnajdr, Signup user step: migrate away from unsafe React lifecycles #59114
• client/signup/steps/user/test/index.js - @jsnajdr, Signup user step: migrate away from unsafe React lifecycles #59114
• client/signup/steps/clone-credentials/index.jsx @flootr CloneCredentialsStep: refactor away from UNSAFE_* #61256
• client/signup/steps/rewind-form-creds/index.jsx @tyxla Rewind: Refactor RewindFormCreds away from UNSAFE_ methods #63133
• client/signup/main.jsx
• client/layout/guided-tours/config-elements/continue.js - @tyxla Guided Tours: Refactor Continue away from UNSAFE_ methods #61366
• client/layout/guided-tours/docs/patch/clean-history.patch - @tyxla Guided Tours: Fix UNSAFE_ methods in docs #61367
• client/layout/guided-tours/config-elements/step.tsx - @tyxla
• client/layout/guided-tours/config-elements/quit.js - @tyxla Guided Tours: Refactor Quit away from UNSAFE_ lifecycle methods #61360
• client/layout/guided-tours/component.jsx - @tyxla Guided Tours: Refactor GuidedToursComponent away from UNSAFE_ methods #61362
• client/layout/masterbar/notifications.jsx - @tyxla Masterbar: Refactor MasterbarItemNotifications away from UNSAFE_ methods #64079
• client/landing/domains/registrant-verification/index.jsx - @tyxla WPCOM: Migrate wpcom.undocumented() registrant verification to wpcom.req #58990
• client/landing/domains/transfer-away-confirmation/index.jsx - @tyxla Domains: Migrate last remaining undocumented methods #59168
• client/blocks/term-tree-selector/index.jsx - @tyxla Site Settings: Refactor TermTreeSelector away from UNSAFE_ methods #60486
• client/blocks/term-tree-selector/terms.jsx - @tyxla Site Settings: Refactor TermTreeSelector away from UNSAFE_ methods #60486
• client/blocks/login/login-form.jsx
• client/blocks/login/two-factor-authentication/verification-code-form.jsx VerificationCodeForm: refactor away from UNSAFE_* #61353
• client/blocks/video-editor/index.jsx @flootr MediaModal: refactor video editing related cmps away from UNSAFE_* #62586
• client/blocks/conversations/list.jsx - @tyxla Reader: Refactor ConversationCommentList away from UNSAFE_ methods #60487
• client/blocks/reader-full-post/featured-image.jsx - @tyxla Reader: Refactor FeaturedImage away from UNSAFE_ lifecycle methods #60915
• client/blocks/reader-featured-video/index.jsx - @tyxla Reader: Refactor ReaderFeaturedVideo away from UNSAFE_ lifecycle methods #60914
• client/blocks/signup-form/index.jsx - @tyxla Signup: Refactor SignupForm away from UNSAFE_ methods #63089
• client/blocks/shortcode/frame.js - @tyxla Media: Refactor ShortcodeFrame away from UNSAFE_ methods #63085
• client/blocks/keyring-connect-button/index.js
• client/blocks/user-mentions/add.jsx @flootr
• client/blocks/site-preview/index.jsx @flootr SitePreview: refactor away from UNSAFE_* #63008
• client/blocks/global-notice/index.js - @tyxla Login: Cleanup social account creation state and components #60920
• client/blocks/image-editor/image-editor-crop.jsx
• client/blocks/image-editor/index.jsx @flootr ImageEditor: refactor away from UNSAFE_* #62944
• client/blocks/image-editor/image-editor-canvas.jsx ImageEditorCanvas: refactor away from UNSAFE_* #62946
• client/blocks/comments/form.jsx @flootr PostCommentForm: refactor away from UNSAFE_* #63087
• client/blocks/comments/post-comment-list.jsx - @tyxla Comments: Refactor PostCommentList away from UNSAFE_ methods #61568
• apps/o2-blocks/src/todo/item.js
• client/lib/keyboard-shortcuts/README.md - @tyxla Misc: Migrate componentWillMount to componentDidMount in READMEs #60127
• client/state/sharing/keyring/README.md - @tyxla Misc: Migrate componentWillMount to componentDidMount in READMEs #60127
• client/state/sharing/services/README.md - @tyxla Misc: Migrate componentWillMount to componentDidMount in READMEs #60127

Related

No response