React Hooks

Before version 16.8 react, we had to write a class component if we wanted to use most features of react and also states but after 16.8 hooks come to save us, finally we are able to use states and other features in functional components.

So Im gonna talk about some of these hooks that we use all the time, lets begin with

1.useEffect

what is side effect?
when we define a function that affects the outside of its current scope, we call it side effect; e.g : setInterval , setTimeout , DOM manipulating , data fetching ,

We used to perform our side effects inside componentDidMount and componentDidUpdate but now we do it with useEffect much easier and cleaner thanks to hooks.

Consider useEffect as a hook which can handle componentDidMount , componentDidUpdate , componentWillUnmount job all in one but there is a difference between these methods and that is useEffect invokes just after the painting asynchronously.

But these three lifeCycle methods are synchronous and invoke after render get called and before browser paint our UI, thus this is an advantage for useEffect unless we want to manipulate the DOM elements inside useEffect and thats not an advantage for example if we change the background color of some elements to red inside the useEffect, it has to wait until browser paint UI on screen and there will be a flicker! and that is the time to useLayoutEffect which I will talk about it in a few minutes. but lets continue with useEffect for now.

So useEffect has three ways for those three lifeCycle methods that we mentioned above:

useEffect accepts two arguments and the second one is optional though.
the first argument is a callback that we put our side effects in
and the second argument is an array that we put our dependencies in.

1. if we use the Effect hook without a second argument, our callback will invoke after every re-render just like componentDidUpdate.
2. if we use an array of dependencies as a second argument, our callback will invoke just after dependencies changes, again like componentDidUpdate.
3. if we use an empty array as the second argument, our callback will invoke just after initial rendering, like componentDidMount
4. and at last if we return a function inside our callback it would be the cleanup function and this function invoke at two points, first after component unmount and second after re-rendering it invokes before side effects, to clean up the old side effects, like componentWillUnmount.thats it for useEffect although it has much more details which we dont have time to go through it in this article, if you would like to read more, you can check out the react documentation.

2.useLayoutEffect
as we mentioned before the difference between this hook and useEffect is that we use this one just for manipulating the DOM elements to avoid flicker. and for almost all the other cases we use Effect hook.

Be careful when using this hook because the browser waits until this hook finishes its process and then paints the UI, thus it could end up with performance issues if you dont use it well. ( seriously use Effect hook in most cases)

3.useState
before hooks came out we had to deal with class components to use states but after 16.8 we dont need class components in most cases at all :D

The above image, MyState is an array with two items:
1: default value of state which we give as an argument to useState hook
2: a function to update the state value
most developers use array destructuring for this hook:

note : we can choose any name instead of state and setState. e.g: [count,setCount].

There is one thing you should know:
if we want to update our state we should pass an argument to setState function which contains the previous state value; check out the images below:

If we just want to add user3 to the other two users we cant do it this way because react wont understand and will mutate the whole object, thus our state will be an object of user3.
but now lets see what should we do:

As you can see we copy the old state with spread operator () and just overwrite it with user3 or we can edit user 2 .etc

we do the same thing for arrays and for strings and numbers we dont need spread operator

4.useRef
We use this hook for almost two reasons:
1.to access DOM nodes directly
2.to hold some information
when you read the first one, you may ask what is the difference between useRef and DOM selectors like querySelector, why should I use ref?
the answer is:
when we use DOM selector, it has to go through the whole dom tree to find the node we want but ref doesnt need to go through all of it because it already has the direct reference to that node, thus it is a performance advantage ;)
by the way, its syntax is like the blow example and returns an object with the property of current :

When you read the second use of this hook you may ask why shouldnt I use just state to hold my stuff in it?
the answer is :
some times we have some information that we dont need to re-render the component every time it changes and just want to hold it inside the object which this hook returns, so this object exists outside of Reacts render cycle and the value persists throughout a component's lifecycle.

note: createRef() is the same but the difference is every time compoment re-renders : useRef uses the same ref throughout but createRef creates new ref every time.

Thats almost all the important hooks you are always gonna use but there are two other hooks (useContext, useReducer) which I think its better to dive into it next time with another article because these two are related to state management, and it would be confusing to talk about them in this article.

Goodbye and good luck