Creating a Custom React Hook: Use Window Size

[@romannikitenko6355]

beautiful and concise solution. And the main thing is clear even to such a beginner like me! Thank you very much!

[@sighamengineering2186]

if I met this video yesterday, I could have saved a day!

[@akugbedestiny8378]

Thanks.. you are a life saver

[@linneagistrand822]

Thank you for a super easy tutorial! Really helped me!

[@lykiamusic]

Great tutorial

[@fieryninja2374]

quick, easy, and helpful

[@trainermono4362]

excellent tutorial sir

[@shaungaryevans]

Thank you very much for this! worked as a treat in my project :)

[@rodrigo41087]

Hello, first of all thanks for the tutorial and a question, when I apply this function in my React project, I notice that the console.logs of other components that have nothing to do with, are fired without any control, that means that all my app is constantly updating without any control, this would affect my performance of my app and how could I avoid this? Sorry for my English

[@sasikantnair]

If you're consuming the updated width and height in the parent component, then when the parent component re-renders, its child will also re-render. For example, if you've applied the updated value of width and height to the App.js component then the whole app will re-render on any changes to the window height and window width since when the App.js component re-renders, it will make its child components render too. You would have to ensure that the resize handlers are specifically implemented in the component which needs it and not the entire app. If the entire app needs it then you will have to use React.Memo or useMemo hook to avoid unnecessary renders or do prop comparison inside shouldComponentUpdate method in class components. This is the best I could think of. Cheers.

[@jamesberesford7310]

Thank you, this is just what I was looking for!

[@pragyan394]

Thanks, exactly what I was looking for

[@hughluo8494]

It really does help ! Thanks a lot !!!

[@giadalanzalaco6128]

Thank you so much!

[@BOSprodz]

Brilliant

[@juano141179]

thanks a lot, it is so usefull for me

[@vitorvaz6281]

awnsome man, help me a lot :D thanks!

[@nithish9782]

Can anyone explain Y we need to remove (clean up) the listener? What will happen if we don't remove that.

[@devrusso]

What will happen: every time the component re-renders it will start another listener, so there will be 2+ "resize" listeners at the same time. The return/clean up function makes sure that once that the listener is removed before the component re-renders so there will never be more than 1 listener running at the same time. You can easily verify this by removing the clean up, doing a console.log inside the useEffect and updating the state (causing the component to rerender); it will log the same thing twice, thrice or whatever, depending on how many times you've . tl;dr if you don't clean up, everytime the component rerenders it will be the same as be adding another window.addeventlistener line

[@harag9]

I'm so confused with react naming..... why call them "custom hooks" - they are functions, nothing more.

[@sunilmaurya6594]

this is not working