Hi All,
In this article, I like to share some points about converting a class to functional component using React Hooks

What is React Hooks?
React Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
I hope you already know about hooks and you have checked the Official React docs if not then it is the best place to start.

I created a simple app called sherlock_catalog. The idea of this app is to get crime data near the Baker street area using UK police crime public API. Categorized them and show details on post-it notes like UI component.

sherlock_catalog build using ...

• Create React App for initial setup.
• Chakra-UI component library to get responsive UI and better UX.
• Github pages for hosting.

Code for app is available on github. It has two branches for the same functionality, one with a traditional class component and the other one with hooks. First, let me explain the class-based implementation of the component.

CrimeContainer
CrimeContainer is a smart component. It holds the main logic to fetch and filter data. It has three main state variables,

• crimes:- Array of crime details objects return from API.
• categories:- Array of unique crime categories, using JavaScript set to feature.
• SelectedCategory:- String of selected category which is set using category button, default is All.

Using these states small stateless functional components shows

• CategoryButtons: Buttons of crime categories, when the user clicks on any button, it will call changeCategory function.
• CrimeDetails: Crime location and investigation details

Replacing constructor based state to useState hooks.

useState is a Hook that lets you add React state to function components. We can start with importing useState hook for React and then calling it in the functional Container component.

useState accepts only one argument initial state and returns an array of the current state and a function that updates it.(It is array destructuring)

Looks easy right? let's move to the next task

Data fetching.

In the class-based version, we use componentDidMount life cycle method for data fetching. (Why ?? because it executed after the first render only on the client-side)

here we use setState method to update the state with data returned by API.

We can achieve the same thing in the functional component using another hook called useEffect. The Effect Hook lets you perform side effects like data fetching, setting up a subscription, and manually changing the DOM in function components.

useEffect accepts a function that contains code which has some side effects. It is possible to access state and related setter methods inside effect, which makes it easy to update the state.

But useEffect will run after every completed render, for our case, it is not desired. To avoid that we can pass empty array [] as the second argument as per official docs,

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works.

I thank you all for patiently reading, hope you get some points. I am trying these things the first time, so if I made some mistakes please suggest corrections and improvements, to make it better. I will try to respond but it may take some time.