React useEffect : A hook to introduce lifecycle methods in functional components
Hello People, Welcome back!
Continuing from where we left in the previous post, where I introduced you to react hooks and useState and spoke about how to save the state in functional components, the next question that comes to my mind is, Through the useState weapon we got all the supplies(state) stored in the arsenal, but we need a weapon that guides how and when to use the supplies. So, today we will be discussing about that weapon known as the useEffect hook.
useEffect-
According to the react documentation, The useEffect hook lets you perform side effects in function components.
useEffect(function(){
console.log('Inside the useEffect function');
}, []);useEffect takes 2 parameters, 1st a function that gets invoked on some side effects and 2nd an array (optional). We will talk in more detail about the function and the array:
Function:useEffect invokes this function to run as side-effect after every render cycle(also based on the 2nd argument). This function could also return another function that runs as a cleanup before the effect function runs again or component un-mounts.
Based on this function, we can use useEffect to replicate one of the major component lifecycles of the class based components.
For example:
ComponentWillUnmount-componentWillUnmount()is called when a component is being removed from the DOM.
For imitating the functionality of componentWillUnmount, we need to pass the cleanup function in this function.
Array:
We can pass variables in this array. Whenever one of the variables changes based on the comparison of the function Object.is(), the function that is passed as the 1st argument gets invoked again.
Based on the variables passed in this array, we can use useEffect to replicate many of the component lifecycles of the class based components.
For example:
ComponentDidMount- componentDidMount() is invoked immediately after a component is mounted.
For imitating the functionality of componentDidMount, we need to pass an empty array([]). When you pass an empty array as 2nd argument, the useEffect function will only get invoked once.
ComponentDidUpdate-componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.
For imitating the functionality of componentDidUpdate, we should not pass the array. It will then run the effect on every render.(It does invoke after the initial render also, but we will look into that later in the series).
shouldComponentUpdate-shouldComponentUpdate() is used if a component’s output is affected by the current change in state or props. The default behaviour is to re-render on every state change.
For imitating the functionality of shouldComponentUpdate, we should pass the values in the array through which the component’s output gets affected.
These are some of the examples of showing how to achieve the functionalities of lifecycle methods using the 2nd argument.
Now, lets also see some behind the curtain things about the useEffect hooks -
When does useEffect invoke?
The function passed to the useEffect gets fired after layout and paint, during a deferred event and asynchronously.This makes your app feel more responsive.
Well talk about invoking the events synchronously later in the series while discussing useLayoutEffect() .
That’s all from my side, thank you so much for reading the blog. I will be continuing this series and will keep on discussing different hooks.
For more updates, let’s connect on LinkedIn .
This story is a part of the ongoing series about react hooks -
