I’m learning how to handle React Hooks.

The article Getting Hooked on React Hooks helped me clear up some misunderstandings.

But I’m still not sure how to use the Effect Hook when it’s supposed to fetch data on a form submit.

In one of my toy apps I have a separate form component. It’s a child to the main app and receives the onSubmit function from the parent. The parent - the main app - defines the onSubmit function which calls the API and captures its result as state.

I don’t have to use componentDidMount, because I only call the API on a form submit.

All the examples I’ve seen for useEffect assume that you need componentDidMount for data fetching after the initial paint.

I refactored the app to useState Hooks but I wonder if it even benefits from useEffect?

Further Reading