Code Quality: Refactor all React class components to functional components using hooks

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.

https://wordpress.org/gutenberg/

Other

10.52k stars 4.21k forks source link

Code Quality: Refactor all React class components to functional components using hooks #22890

Open youknowriad opened 4 years ago

youknowriad commented 4 years ago

The official recommendation for writing React components is as follows.

All components should be implemented as function components, using hooks for managing component lifecycle and state.

If you're a new/junior contributor looking to help with this refactoring, follow these steps:

Search for class components on the codebase (For example by searching extends Component
Pick a component to refactor.
Comment on this issue saying that you're working on the said component.

Note This is a tracking issue for the React components guidelines. This issue is tailored specifically for junior and new contributors. Experienced contributors shouldn't do big refactorings unless they update the code for another reason (bug fix, feature).

pkvillanueva commented 4 years ago

👋 I'm working on TabPanel component.

truchot commented 4 years ago

I'm working on DatePicker component ;)

cbravobernal commented 4 years ago

I'm working on Dashicon component :-)

torounit commented 4 years ago

I'm working on ImageSizeControl component.

youknowriad commented 4 years ago

@c4rl0sbr4v0 Actually the Dashicon component is a bit special, it's one that is generated on a separate repository and injected here as is (not edited manually), I'd recommend working on another component if possible.

cbravobernal commented 4 years ago

Question about refactoring components: should we use function Name () {} or an arrow function -> const Name = () => {} ?

In order to have all more or less the same structure :-)

truchot commented 4 years ago

Question about refactoring components: should we use function Name () {} or an arrow function -> const Name = () => {} ?

In order to have all more or less the same structure :-)

I use function Name() {} for components and arrow function inside. I don't know if I do well.

pkvillanueva commented 4 years ago

@c4rl0sbr4v0 I think both are fine to use.

youknowriad commented 4 years ago

We don't have a defined guideline, I think we prefer function Name in general but @truchot's way is a good middle ground too.

cbravobernal commented 4 years ago

I took Dropdown, this is not an easy one 😆

truchot commented 4 years ago

Question about refactoring components: should we use function Name () {} or an arrow function -> const Name = () => {} ?

In order to have all more or less the same structure :-)

@c4rl0sbr4v0 : It seems named functions are more appreciated than arrow functions 😄 I understand it's more convenient to debug.

ellatrix commented 4 years ago

It's especially good to refactor the blocks since that code is the most looked at and copied.

pkvillanueva commented 4 years ago

If I work on refactoring the ColorPicker component, should I include its sub-components Alpha, Hue, Inputs, and Saturation?

youknowriad commented 4 years ago

@pkvillanueva not necessarily, you can do one by one.

jccit commented 4 years ago

I'm working on the PanelBody component

oxyc commented 4 years ago

PR ready for Media & Text ~https://github.com/WordPress/gutenberg/pull/23062~ https://github.com/WordPress/gutenberg/pull/23102

pkvillanueva commented 4 years ago

PR for CalendarEdit #23072.

sc81 commented 4 years ago

PR for ToggleControl #23116 PR for Dropdown #23142

bartczyz commented 4 years ago

I'm working on Tag Cloud block.

bartczyz commented 4 years ago

I'm going to tackle Latest Comments block next. 👍

javidalkaruzi commented 4 years ago

I'm tackling the Disabled component

javidalkaruzi commented 4 years ago

I am working on the URLPopover component

ntsekouras commented 4 years ago

MediaPlaceholder here: https://github.com/WordPress/gutenberg/pull/23671

kevin940726 commented 4 years ago

I'll tackle <BlockInvalidWarning> 💪

kevin940726 commented 4 years ago

I'll tackle <TimePicker> next 🕐

alexandec commented 4 years ago

I'm working on <BlockMover>!

ravichdev commented 4 years ago

I will be working on the GalleryImage component

daddou-ma commented 4 years ago

I'm working on the ColorPicker component.

grzim commented 3 years ago

Tooltip done here https://github.com/WordPress/gutenberg/pull/27353

jhnstn commented 3 years ago

I'm working on URLInput component.

jhnstn commented 3 years ago

I'm working on the Inserter component.

ZebulanStanphill commented 3 years ago

I've done ServerSideRender in #28297. And as it turns out, @fabiankaegy was working on their own PR (#28289) simultaneously, which does the same thing, while also addressing #24519.

chiilog commented 3 years ago

I'm working on FullscreenMode component.

chiilog commented 3 years ago

@youknowriad I've done FullscreenMode in #32925 :)

gziolo commented 2 years ago

It looks like there is still a lot of components to update:

youknowriad commented 2 years ago

@gziolo If I exclude native code, tests, documentation, error boundaries... I find 38 instances. It's a bit better :)

amustaque97 commented 2 years ago

I would like to refactor SlotComponent but not sure how to test it validate it to make sure if things are working correctly after refactoring! Can anyone please help with that?

amustaque97 commented 2 years ago

:wave: I'm working on SuggestionsList component.

amustaque97 commented 2 years ago

Linked PR for ImportForm reusable component.

louwie17 commented 1 year ago

I have a PR open to convert the EmbedPreview component -> https://github.com/WordPress/gutenberg/pull/51325

GP-Dan-Tovbein commented 12 months ago

I'm working on the Media Upload Progress component