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

[youknowriad]

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]

👋 I'm working on TabPanel component.

[truchot]

I'm working on DatePicker component ;)

[c4rl0sbr4v0]

I'm working on Dashicon component :-)

[torounit]

I'm working on ImageSizeControl component.

[youknowriad]

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

[c4rl0sbr4v0]

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]

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]

@c4rl0sbr4v0 I think both are fine to use.

[youknowriad]

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.

[c4rl0sbr4v0]

I took Dropdown, this is not an easy one 😆

[truchot]

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]

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

[pkvillanueva]

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

[youknowriad]

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

[jccit]

I'm working on the PanelBody component

[oxyc]

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

[pkvillanueva]

PR for CalendarEdit #23072.

[sc81]

PR for ToggleControl #23116
PR for Dropdown #23142

[bartczyz]

I'm working on Tag Cloud block.

[bartczyz]

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

[javidalkaruzi]

I'm tackling the Disabled component

[javidalkaruzi]

I am working on the URLPopover component

[ntsekouras]

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

[kevin940726]

I'll tackle <BlockInvalidWarning> 💪

[kevin940726]

I'll tackle <TimePicker> next 🕐

[alexandec]

I'm working on <BlockMover>!

[ravichdev]

I will be working on the GalleryImage component

[daddou-ma]

I'm working on the ColorPicker component.