One class component still runs on lifecycle methods everyone else replaced

This class component still works, but it's the last one in a codebase that's otherwise all hooks.

Beginner to intermediateRead 4 minDoing: about an hour6 steps

What you'll have at the end

The class rewritten as a function component using useState and useEffect, checked side by side against the original on mount, a prop change, the refresh action, and unmount, with the class deleted once every check matches.

Before you start

You need

A class component that already works: it defines this.state, at least one of componentDidMount, componentDidUpdate or componentWillUnmount, and sits in a codebase where every sibling component is already a function component using hooks.

Not covered

Converting a class component that defines componentDidCatch or getDerivedStateFromError: those two lifecycle methods still have no hook equivalent, so a component built around either one has to stay a class.

Leans on

Understand what the class actually depends on

Inventory the class before touching it
Confirm unmount and update mirror mount

Rebuild it as a function

Turn state and lifecycle into one effect
Give refresh its own dependency
Drop the constructor's binding

Confirm it, then remove the old version

Verify both versions, then delete the class

Where to go next

Give one broken widget an error boundary

when the class you're actually looking at defines componentDidCatch or getDerivedStateFromError, since that class has to stay a class and this recipe covers building one well instead of trying to convert it

Pull duplicated logic out of two components into your own custom hook

once more than one converted component ends up running the same fetch-and-cancel effect, since pulling that pattern into its own hook removes the duplication this migration tends to create

Checked 22 Aug 2026

Part of the React Frontend Framework cookbook