Write Functional Smart components using Hooks
Published: 2020-08-23 15:16:23

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](https://reactjs.org/docs/hooks-intro.html) if not then it is the best place to start.

I created a simple app called [sherlock_catalog](https://ingalej.github.io/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.![App ](https://dev-to-uploads.s3.amazonaws.com/i/m62ryipnxh9re6dlokna.png)

**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](https://github.com/IngaleJ/sherlock_catalog). 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. 
![constructor state](https://dev-to-uploads.s3.amazonaws.com/i/0ha3sj8svqkreogtir3r.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/5t09o2si6nfrx4hehet4.png)
**`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] (https://javascript.info/destructuring-assignment))

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)
![componentDidMount](https://dev-to-uploads.s3.amazonaws.com/i/0bf7kzuekl5hqkfk11dz.png)
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](https://dev-to-uploads.s3.amazonaws.com/i/5skyxgdvmbryz33fyqhu.png)

`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.