DEV Community


Discussion on: React Simplified: Infield Example of React Hooks ft. Hamburger Navigation Pt. 2

tundeiness profile image
Tunde Oretade

Hi Kevin, nice article I must say and it gives me ideas for a project I'm implementing. However, I have something I'm not too clear about in your implementation. You see, a react principle says "do not manipulate the DOM directly" and when I see this line of code in your implementation (const menuOverlay = document.querySelector(".overlay-menu"); ) It got me asking if this isn't against Reacts' principles? What do you think?

uzomezu profile image
Kevin Mezu Author

Hey, that is certainly a point worth mentioning, Tunde! React works with the use of a virtual DOM or V-DOM. A virtual DOM window that syncs with the real DOM. Re-rendering and state change are the Go-To for react-apps as referencing the DOM can cause infinite re-renders, or i.e. not a good time.

Check out my article here on the usage of useRef() function, and how with certain react hooks, you can in fact reference the DOM, as long as you are not causing an additional re-render.