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
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 msgagain 👩💻
let's say in the first time you selected
Sarah and then
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
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
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
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 ❤️