According to React Documentation (reactjs.org), the Effect Hook lets you perform side effects in function components.
So, what is a Side effect? – A side effect is an application state that happens outside of the called function, it means any state change other than its return value.
For Example:
- Function addNumbers(a,b){
- Const result = a+b;
- Window.variable = result;
- Return result;
- }
In the second line of the above function, we have window.variable equals to the result of adding two numbers. Every time we are running this function, if someone from the outside does window.variable they will be able to see that this state is changing every time, whenever the addNumbers function is called. So the addNumbers function is performing the side effect of changing this global variable value, so that’s a side effect.
Let’s see your topics. First useEffect Hook:
Sample code
- Export function component({name}){
- useEffect(()=>{
- console.log(name);
- })
- Return <div>{name}</div>
- }
By seeing this code, this is our first intention, this component will render some name which we’re going to pass to this function.
Then secondly, sooner or later react will be able to run the useEffect function and the colsole.log will get executed.
So, everything is perfect, isn’t it? Let's see the timeline of this process in order to understand what happens when react calls our component bypassing some name variable as input.
The first step is React will call our component, component will execute and return that div with some name which passed to that function. Now React starts the DOM Changes, and the DOM will look like this,
- <body>
- <div>
- <div>some name</div>
- </div>
- </body>
Up to this moment, the browser is empty, because the browser didn’t yet have the chance to do what we call the browser painting the name.
After this moment, after the DOM gets updated, now the browser will paint, which means it’ll translate whatever value we passed to the name variable into Pixels.
Now we can see the Name value which we passed to the function in the browser screen. Now React knows that the browser is painted, which means rendered the component, then react will go into useEffect function and the console will get executed.
So, this was the timeline for the useEffect.
Now, what if, in some use cases if we are trying to changing the background color of the name based on the conditions inside the useEffect function.
For example,
- useEffect(()=>{
- if(name === “React”)
- {
- Document.querySelector(‘div’).styel.background=”green”;
- }
- })
In this case, the timeline will be like this,
The browser screen is empty at first, after the DOM gets updated it’ll paint “React”, then based on useEffect function condition, the browser will paint the background color as Green.
In this small sample program, it seems everything is ok. But in the large enterprise applications, there will some flickering in the browser screen you can notice while running this. This will be giving some bad user experience.
To overcome this middle state of the UI, also we want something that allows running our useEffect before the browser paints, which means before the render. For this, we have to use useLayoutEffect hook.
If we use the useLayoutEffect instead of useEffect, useLayoutEffect function will run immediately after the DOM get changes from react, so the code will look like this,
- <body>
- <div>
- <div style=”background:green”>some name</div>
- </div>
- </body>
Let's see the timeline if we use useLayoutEffect,
Now when our browser screen paints, we will have no middle state, we can directly see the React with background color green. There is no type of flickering in the browser screen if we use useLayoutEffect.
So, in conclusion, we will use the useEffect the most, but in some use cases like the above sample code, if you want to overcome the flickering after the render, using useLayoutEffect is quite effective.