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 I’m gonna talk about some of these hooks that we use all the time, let’s begin with…

1.useEffect

what is side effect?
when we define a function that affects the outside of it’s 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 that’s 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 let’s 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. that’s it for useEffect although it has much more details which we don’t 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 don’t 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 don’t 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 can’t do it this way because react won’t understand and will mutate the whole object, thus our state will be an object of user3.
but now let’s 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 doesn’t 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, it’s 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 shouldn’t I use just state to hold my stuff in it?
the answer is :
some times we have some information that we don’t 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 React’s 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.

That’s almost all the important hooks you are always gonna use but there are two other hooks (useContext, useReducer) which I think it’s 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🤞