WordPress/gutenberg

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

Open

#22,890 opened on Jun 4, 2020

View on GitHub
 (53 comments) (12 reactions) (0 assignees)JavaScript (3,893 forks)batch import
Good First Issue[Package] Components[Status] In Progress[Type] Code Quality[Type] Tracking Issue

Repository metrics

Stars
 (9,607 stars)
PR merge metrics
 (Avg merge 12d 18h) (509 merged PRs in 30d)

Description

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

Contributor guide

Research direction
Select a component using 'extends Component', understand its state and lifecycle methods, then convert to a function component using useState and useEffect.
Tech stack
javascriptreact
Domain
frontend
Issue type
Refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactGit
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80