How to Convert a React Class Component to a Functional Component With Hooks

How to Convert a React Class Component to a Functional Component With Hooks

Converting a class component to a functional component is a task you will do in real jobs, since teams modernize old code. Here is how to do it step by step.

Step 1: Replace the Class With a Function

Turn the class into a function that takes props as an argument and returns the render output. Drop the render method wrapper.

Step 2: Convert State

Replace this.state with one or more useState calls. Each piece of state becomes its own useState, with the setter replacing this.setState.

Step 3: Convert Lifecycle Methods

Replace componentDidMount with useEffect and an empty dependency array. Replace componentDidUpdate with useEffect and the relevant dependencies. Replace componentWillUnmount with a cleanup function returned from useEffect.

Step 4: Replace this

Remove all references to this. Props come from the function argument, state comes from useState, and methods become plain functions or are defined inside the component.

Step 5: Fix Binding

Class methods needed binding because of this. Functional components do not, so you can remove all the constructor binding boilerplate.

Step 6: Test the Conversion

After converting, test that the component behaves identically: state updates, effects run at the right times, and cleanup happens on unmount.

The Common Mistake

Forgetting to add the right dependencies to useEffect, so the converted component does not react to prop changes the way componentDidUpdate did. Use the hooks lint plugin to catch this.

The Takeaway

Convert a class to a function by replacing state with useState, lifecycle methods with useEffect, removing this and binding, and testing that behavior matches. The lint plugin helps you get dependencies right.