Demystifying useEffect() hook
Hooks — in react functional approach, are no more a new thing though. But, for those having strong background and mindset of classes or angular, it's tough to get into the shoes of a React mindset.
useEffect() is one of the most critical piece to understand and use the way it should be. Since — it clubs three different lifecycle phase into one and handle many more possibilities and combinations in practical React.
This post is for those still sitting on pool side and ready to swim in the sea (pun intended :-) ). Having interacted and interviewed many aspiring react developers, there still a gray area on how hooks actually work in React.
This post is just to have practical examples and demonstrate — how a particular hook behaves in each situation/condition.
- A React useEffect() is executed only when a react component renders. It can be an initial render of the component or subsequent re-render because of state or prop update.
- There are 4 different variations of a useEffect()-
a. without second parameter (which is an array of dependencies).
b. with second parameter as an empty array (with no dependencies).
c. with a non empty array as second parameter (with one or more dependencies)
d. with a return function — to be triggered on component unmount.
