i was going through a react course for John Smilga on freecodecamp youtube channel and he was explaining the uses of useEffect hooks. I tried to do the same example without the useEffect function and it worked exactly the same. As you can see in the following image, his original code is commented out and i just copied out “window.addEventListner(‘resize’', checkSize)” , which worked just fine.
so is there a difference here that am not comprehending?
Welcome there,
The difference is the component lifecycle.
Typically, you will only notice when you are working with props, and not a global state object (window). The main thing to differentiate is:
When the component mounts, the code before the return is run. This happens before the content is rendered.
When the content is rendered, the useEffect callback is called (only when defined to as indicated by the empty dependency array argument).
In many ways, Event Listeners acts like many of the React Lifecycle hooks do.
Hope this helps