why should we use React hooks?!

#react #hooks #components #javascript

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 and let's do the following...

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.

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 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😏

 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

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 ❤️