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

[cbravobernal]

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.

[cbravobernal]

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.

[cbravobernal]

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 #23062 #23102

[pkvillanueva]

PR for CalendarEdit #23072.

[grzim]

Tooltip done here #27353

[jhnstn]

I'm working on URLInput component.

[jhnstn]

I'm working on the Inserter component.

[ZebulanStanphill]

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]

I'm working on FullscreenMode component.

[chiilog]

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

[gziolo]

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

[youknowriad]

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

[amustaque97]

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]

👋 I'm working on SuggestionsList component.

[amustaque97]

Linked PR for ImportForm reusable component.

[louwie17]

I have a PR open to convert the EmbedPreview component -> #51325

[GP-Dan-Tovbein]

I'm working on the Media Upload Progress component