@adityaphasu
Posted
Hi! The design looks epic!✨
For the past 10 mins I was trying to see why the website was not showing me the section with the text and I was like lemme try out other browsers and it showed out perfectly in those... I thought my chrome was broken but it seems like you named the section advert-container and my adblocker extension thought it was some kind of ad and deleted it 😭
Might wanna change the section's classname to something like content container or something along those lines in case others also have some sort of adblocker on hahahaha 😆
I really like the usage of useRef() hook! though would like to ask what would be the better hook to use useState or useRef for inputs (I'm really conflicted on these since recently seeing lots of articles where some say useState is better as you'd want to have those as controlled components and the docs also seems to recommend that over useRef but some say that you dont want complete rerenders of simple values of inputs hence useRef) would love to hear your thoughts on this! 🙂
Marked as helpful
@adityaphasu Hi Boots! Wow, that's actually very good te know... had no idea this would cause issues with Ad Blockers. Although it kinda makes sense now I'm thinking about it haha. I will definitely edit the code, thanks!
The useRef hook is a pretty confusing concept compared to useState. Why use it in the first place? Well, useRef is purely for accessing DOM nodes directly, thus bypassing the virtual DOM which React generates (and is used by the useState hook). So this is basically the React version of: document.querySelector() in vanilla JS. Another big difference is that useRef does not re-render anything. So your mentioned argument on not re-rendering simple values is very valid. This is better for the app performance.
That being said; because React makes use of the virtual DOM principle useState is always the preferred way of doing things. And this is actually best-practice in a lot of companies. useRef should only be used if you can not achieve your goal with useState. A good example of this for instance is getting window or container dimensions from the DOM, here you will need to access the DOM (nodes) directly.
@adityaphasu
Posted
@EdwinSch omg thanks for the reply! The reason I asked about this was because last night I came across this video by webdev simplified where he was talking about this and people in the comments were arguing about the same thing I asked ...went on to search more about this just to find myself more conflicted and it seems to happen you did a challenge based on this and I couldn't help it but ask haha! Thank you so much for clarifying!😊
@adityaphasu No problem. This is actually why Svelte is gaining massive popularity, it doesn't make use of a virtual DOM but manipulates the actual DOM instead. So Svelte acts more like vanilla JS (including the syntax). Could argue it's one big useRef framework haha. It's a whole discussion on itself, I've already fallen into that rabbit hole... :P
All fun, but in the end the user doesn't give a crap about how we build it. It just has to work properly.
