why should we use React hooks?!
Tags: react, hooks, components, javascript
Published: 2020-12-01 17:43:37

---
title: why should we use React hooks?!
published: true
description: wondering about the motive to start using hooks, what do you think the code difference between class and function components that may push you to start using hooks?!
tags: react, hooks, #components, #javascript 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5m69mwaoaxz3bds2ziui.png
---
Hooks 🤔 Hooks 👀 Hooks 🤨 
What Hooks are 🙄

Personally cannot see better answer than the one mentioned in the official react docs 🤷
> Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Mmm, Not convinced yet 😏, why we should even seek to replace classes 🙄

It is not a replacement rather than a recommendation and a new way of writing more elegant and neat code.

let's discuss one of the core and maybe the main difference between function and class component, and pointing out how hooks are gonna help us writing effortless code.

I LOVE this part😉

**Class components do not capture the rendered values, while functional components DO**.

Now it may be a 🙃, 🤔 or 🤨 moment, but wait ✋

An application UI is the representative of the current application state, with every change in the application state, or props we got a fresh new render for our UI, with everything included within, EVERYTHING here means everything even the event handlers used. Everything in the UI belongs to an EXACT particular render with EXACT particular data, _(either state or props)_.

**NOW, WHAT 🙄?!**

[check this snippet](https://codesandbox.io/s/function-component-pq68t) and let's do the following...

1. select a friend then press `send msg`

let's say you choose `Adam` you will see `you choose Adam` and after 3 seconds a message `Hi Adam` is printed, fair enough!

**NOTE**: _the 3 seconds because we use `setTimeOut()` to wait for a while before printing the message_.

2. select a friend then press `send msg`, and before the 3 seconds pass, select a different friend and press `send msg` again 👩‍💻

let's say in the first time you selected `Sarah` and then `Adam`, 
what happened is, with your first click you see `you choose Sarah` and once you press again it changes to be `you choose Adam`,
**BUT** after 3 seconds the message printed is `Hi sarah`, _your first choice_, and after other 3 seconds the message changes to be `Hi adam`.

we agree this is the right behaviour and nothing abnormal or creepy is happening here, BUT again we need to emphasis this is happening because the function component **_capture_** the values rendered. 

We may think of _capture_ as saving or preserving the data and knows what to do with, which is not the case in a class component, let's check [this snippet] (https://codesandbox.io/s/class-components-eud1p) and repeat the exact same steps we have made above...

When we select a friend, let's say `Adam`, and before 3 seconds reselect another friend, `Sarah`, after 3 seconds we will not see our first choice, instead we are gonna see our last choice `Hi sarah`😵

**let's take it step by step:**

both function and class components access the selected value from their `props`, which is **immutable** CANNOT BE CHANGED, but in the class component, the `props` are accessible via `this`, which is **mutable** CAN BE CHANGED and it is meant to be.

so the props value gonna printed in the class component is taken from the new `this`, actually the very new `this`.

to solve 🔧 this, and make a class component **capture** its values during different renders we used to follow many approaches:
* saving the props value in a variable😏
```js
 let friend = this.props.friend 
```
which is not the choice recommended, what if we have a fair number of props or we needed even to access functions and state, it is gonna be a real mess🤦.

* tying up everything we need to a specific render, [check this snippet] (https://codesandbox.io/s/class-components-capture-values-rzt27)

using this way everything needed is connected to a specific render.

this one of the core difference between class and functional components, and this difference actually used to cause a lot of problems and most of us stuck there for a while one day, but we had to use class components as we needed state, and lifecycle hooks and there was no alternative so we had to, but now with hooks, we do not have to any more😉.

Hope this helps, thanks for reading and if you have any questions or any topic you want me to write about I will be happy to help, and your comments and constructive notes are more than welcome ❤️