WordPress/gutenberg

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

Open

#22890 opened on Jun 4, 2020

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

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

Tech stack
reactjavascript
Domain
frontend
Issue type
refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
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
React class componentsReact hooksJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Search for class components in the codebase using the search query 'extends Component'. Choose a component that has not been claimed yet. Comment on this issue to indicate you are working on that component. Ensure the refactored component uses functional components with hooks, following React's official recommendation.