Step 1. Refactoring From a Class to Functional Component

Take this plain React class-based component. Our first step to using Hooks would be to refactor it to a functional component. Remember, you use Hooks only with functional components.

The component has a hasError and a planets state. If the component mounts, we call the Star Wars API and fetch the information.

Fetching data with the Fetch API and React class component

Here’s how we would transform the component to a functional component.

Tada! A functional component with Hooks. There’s just one problem, though. Hooks don’t have lifecycle effects such as componentDidMount or componentWillMount .

using componentDidMount inside a functional component

What do we do now?