React from Newbie Perspective— useEffect
Without a doubt, second most important and useful React Hook is useEffect. Effect Hook is a way of performing side effects in function components. As I mentioned in previous article, as a newbie, I started to learn JavaScript and React recently, so to understand how Hooks helps and improves programmers life I have to try to understand how it works before. In this case specially how React class lifecycle works, because Effect Hook combine componentDidMount, componentDidUpdate and componentWillUnmount. And how side effects with and without cleanup works.
Effect Hook — more action in one
Effect Hook combines 3 lifecycles methods in one. But how it is able to this?
Mounting and Unmounting Component
Mounting
Simply version of useEffect runs when render is completed. React is performing code in useEffect after DOM are updated and performs it every time component is rendered. If we need to cleanup after our component is unmounted, we can add function to perform this cleaning as return value.
Unmounting
In contrast to componentWillUnmount in Class, React Effect Hook uses returned function, which is performed, when component is unmount. It doesn’t have to be named function, but it could even an arrow function. One way or the other, this function cleans up running app and saves us from memory leak errors and lots of headaches. As in React Docs is this part quite austere, I found really straightforward article on dev.to (https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm) by Martín Mato with this example:
There we can see, that added variable “mounted” provides info about actual status of component and if component is unmounted, it will run cleanup function, that sets this variable to “false” and stops performing provided coded.
Updating Component
As I wrote earlier, useEffect is performed with every render. It can cause render loop or, in better situation, performing useEffect when it isn’t needed and wasting computing resources. And this is exactly the situation, when second optional argument of useEffect comes to the scene. Second argument is an array of dependent variables and functions. To run useEffect just ones, you can leave this array empty. In other cases, we can specify, or ESLint will force use, variables or function which changes will trigger to perform useEffect again. But useEffect runs only when these values are changed, so it will run less than every render.
Conclusion
When we understand, how React works with component lifecycle, React Effect Hook became one on of the biggest friend of coder. Great advantage against React Component Class lifecycle methods is unity, simplicity and not-repeating code. While in Class, we need three methods, with Effect Hook, we have just one. And this is one of the main goals of Hooks, making our lives easier.
