Hi all ,
On the whole, the idea is to refactor class components to functional components by using hooks . I have gone through some concepts on how to make use of hooks/custom hooks in different scenarios and I have stated some of my understood knowledge below.
UseEffect works in mounting , unmounting components in the DOM ,fetching data and allowing side effects in the components .
Instead of useState opting for an alternative of useReducer when the number of state transitions are too many so that several state variables are updated under one place.
Use of useCallback and useMemo hooks along with React.memo to optimize the performance of the components .
@sneridagh & @nileshgulia1 awaiting your feedback and mentorship on how I can approach the Refactor class components to functional components idea in general?
2 Likes
Hey @sneridagh , can you provide your feedback ,it would be helpful to continue further . Thank you.
sneridagh
(Victor Fernandez de Alba)
March 9, 2023, 10:09am
4
Hi Tisha,
Did you check the PLIP?
opened 08:57AM - 04 Mar 23 UTC
03 type: feature (plip)
## PLIP (Plone Improvement Proposal)
## Responsible Persons
### Proposer: … Víctor Fernández de Alba (@sneridagh)
### Seconder:
## Abstract
Refactor all the possible components in Volto that still are class-based components. Convert them to functional components, whenever possible.
## Motivation
Volto still have a number of core components that are React class-based components. This prevents the use of hooks in them, and newest DX on them.
The idea is also while moving to them, use hooks to abstract the functionality present in Redux and in data fetching so in a near future we can easily switch using the hooks to use other props provider.
## Assumptions
No assumptions.
## Proposal & Implementation
Refactor should be done carefully and providing Cypress (acceptance) tests where they do not exist. The lifecycle of the components should be preserved while watching out for edge cases and UX problems.
## Deliverables
It should be delivered all at once, as a major breaking change. Ideally, we _won't_ change the contract of any of the components, so no new props passed down, no return anything to the tree that we were not returning before, unless it's justified.
If the contract has to be broken, then it must be properly documented and exposed in the upgrade guide.
The refactored components. Here there is a preliminary list, subject to change:
- [ ] src/components/theme/Comments/CommentEditModal.jsx
- [ ] src/components/theme/Comments/Comments.jsx
- [ ] src/components/theme/App/App.jsx
- [ ] src/components/theme/ContactForm/ContactForm.jsx
- [ ] src/components/theme/Navigation/Navigation.jsx
- [ ] src/components/theme/Sitemap/Sitemap.jsx
- [ ] src/components/theme/Logout/Logout.jsx
- [ ] src/components/theme/Search/SearchTags.jsx
- [ ] src/components/theme/Search/Search.jsx
- [ ] src/components/theme/Register/Register.jsx
- [ ] src/components/theme/PasswordReset/PasswordReset.jsx
- [ ] src/components/theme/PasswordReset/RequestPasswordReset.jsx
- [ ] src/components/theme/View/View.jsx
- [ ] src/components/theme/View/AlbumView.jsx
- [ ] src/components/theme/View/LinkView.jsx
- [ ] src/components/theme/SearchWidget/SearchWidget.jsx
- [ ] src/components/theme/Anontools/Anontools.jsx
- [ ] src/components/theme/Breadcrumbs/Breadcrumbs.jsx
- [ ] src/components/theme/Login/Login.jsx
- [ ] src/components/theme/Header/Header.jsx
- [ ] src/components/manage/Blocks/Maps/Edit.jsx
- [ ] src/components/manage/Blocks/LeadImage/Edit.jsx
- [ ] src/components/manage/Blocks/Video/Edit.jsx
- [ ] src/components/manage/Blocks/ToC/Edit.jsx
- [ ] src/components/manage/Blocks/HTML/Edit.jsx
- [ ] src/components/manage/Blocks/Image/Edit.jsx
- [ ] src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx
- [ ] src/components/manage/Blocks/Table/Cell.jsx
- [ ] src/components/manage/Blocks/Table/Edit.jsx
- [ ] src/components/manage/Blocks/Text/Edit.jsx
- [ ] src/components/manage/Blocks/HeroImageLeft/Edit.jsx
- [ ] src/components/manage/Blocks/Block/Edit.jsx
- [ ] src/components/manage/Sidebar/ObjectBrowserBody.jsx
- [ ] src/components/manage/Sidebar/Sidebar.jsx
- [ ] src/components/manage/Contents/ContentsTagsModal.jsx
- [ ] src/components/manage/Contents/ContentsUploadModal.jsx
- [ ] src/components/manage/Contents/ContentsRenameModal.jsx
- [ ] src/components/manage/Contents/ContentsWorkflowModal.jsx
- [ ] src/components/manage/Contents/Contents.jsx
- [ ] src/components/manage/Contents/ContentsPropertiesModal.jsx
- [ ] src/components/manage/Preferences/PersonalInformation.jsx
- [ ] src/components/manage/Preferences/PersonalPreferences.jsx
- [ ] src/components/manage/Preferences/ChangePassword.jsx
- [ ] src/components/manage/Form/ModalForm.jsx
- [ ] src/components/manage/Form/Form.jsx
- [ ] src/components/manage/AnchorPlugin/components/LinkButton/index.jsx
- [ ] src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx
- [ ] src/components/manage/Messages/Messages.jsx
- [ ] src/components/manage/Sharing/Sharing.jsx
- [ ] src/components/manage/Controlpanels/ContentType.jsx
- [ ] src/components/manage/Controlpanels/Controlpanels.jsx
- [ ] src/components/manage/Controlpanels/ContentTypes.jsx
- [ ] src/components/manage/Controlpanels/Aliases.jsx
- [ ] src/components/manage/Controlpanels/DatabaseInformation.jsx
- [ ] src/components/manage/Controlpanels/UndoControlpanel.jsx
- [ ] src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
- [ ] src/components/manage/Controlpanels/Groups/RenderGroups.jsx
- [ ] src/components/manage/Controlpanels/Users/RenderUsers.jsx
- [ ] src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
- [ ] src/components/manage/Controlpanels/ContentTypeSchema.jsx
- [ ] src/components/manage/Controlpanels/Controlpanel.jsx
- [ ] src/components/manage/Controlpanels/AddonsControlpanel.jsx
- [ ] src/components/manage/Controlpanels/ModerateComments.jsx
- [ ] src/components/manage/Controlpanels/ContentTypeLayout.jsx
- [ ] src/components/manage/Delete/Delete.jsx
- [ ] src/components/manage/Toolbar/More.jsx
- [ ] src/components/manage/Toolbar/PersonalTools.jsx
- [ ] src/components/manage/Toolbar/Toolbar.jsx
- [ ] src/components/manage/Diff/Diff.jsx
- [ ] src/components/manage/Edit/Edit.jsx
- [ ] src/components/manage/Add/Add.jsx
- [ ] src/components/manage/Workflow/Workflow.jsx
- [ ] src/components/manage/History/History.jsx
- [ ] src/components/manage/Actions/Actions.jsx
- [ ] src/components/manage/Display/Display.jsx
- [ ] src/components/manage/Aliases/Aliases.jsx
- [ ] src/components/manage/Widgets/SelectWidget.jsx
- [ ] src/components/manage/Widgets/ReferenceWidget.jsx
- [ ] src/components/manage/Widgets/FormFieldWrapper.jsx
- [ ] src/components/manage/Widgets/IdWidget.jsx
- [ ] src/components/manage/Widgets/QueryWidget.jsx
- [ ] src/components/manage/Widgets/WysiwygWidget.jsx
- [ ] src/components/manage/Widgets/ArrayWidget.jsx
- [ ] src/components/manage/Widgets/ObjectBrowserWidget.jsx
- [ ] src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx
- [ ] src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthIndexField.jsx
- [ ] src/components/manage/Widgets/DatetimeWidget.jsx
- [ ] src/components/manage/Widgets/TokenWidget.jsx
- [ ] src/components/manage/Widgets/SchemaWidget.jsx
- [ ] src/components/manage/Widgets/SelectAutoComplete.jsx
- [ ] src/components/manage/Widgets/TextWidget.jsx
- [ ] src/helpers/AsyncConnect/AsyncConnect.jsx
- [ ] src/helpers/Html/Html.jsx
- [ ] src/helpers/BodyClass/BodyClass.jsx
## Risks
The lifecycle of a component could easily be changed if the refactor is not done carefully and giving attention to details, that's why we should provide acceptance tests and heavy QA should be done while doing it.
## Participants
Víctor Fernández de Alba (@sneridagh)
Anyone who would like to help and take over, will be appreciated.
That's a detailed idea of the project. Please let us know if you have any question about it.
I have submitted the initial draft of the proposal. Any feedback will be highly appreciated.
GSOC Related Doubt
Does Expected size of the project: 350 hours correspond to Project Size: Large ?
Yes, 350hrs for a large project. If I recall there is also a provision to extend it further. however, it shouldn't be a matter of concern for now.
1 Like