A Deep Dive into React: useElementSize Hook and Resize Observing

In this tutorial video, we will explore in-depth the 'useElementSize' hook in React. We will debate about HTML elements, focus on states and re-renders, and the importance of ref in storing values. We will further delve into the size interface, specifically in the 'width' and 'height' fields. We discuss the 'ResizeObserver', focusing on its function, reliability, and the importance of extracting width and height from the bounding box. The video also underscores the function of the 'useLayoutEffect' hook in updating the size state after DOM has changed. Join us as we unfold great insights about React components, re-renders, and much more.

Demo: https://kit.radzion.com/size-aware

Source code: https://github.com/radzionc/radzionkit

Accelerate your work and reach your goals faster with https://increaser.org – where deep work, time mastery, and habit shaping converge for your success! 💪🚀