BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

React

701What useRef is: A Mutable Box
702The Key Difference: useRef vs useState
703Creating a Ref with useRef
704Reading and Writing ref.current
705Refs Survive Re-renders
706Common Use Case: Storing Previous Values
707Common Use Case: Counters and Flags
708Common Use Case: Avoiding Stale Closures
709Refs in useEffect: Tracking Component Lifecycle
710When NOT to Use useRef for Values
711Refs Are Not Reactive
712The ref.current Timing Guarantee
713The ref Prop: Accessing DOM Nodes Directly
714Creating and Attaching Refs to Elements
715Accessing current After Mount
716Common DOM Operations: Focus
717Common DOM Operations: Scroll
718Common DOM Operations: Measuring Elements
719Refs on Built-in Components vs Custom Components
720The Ref Callback Pattern
721Multiple Refs in Lists
722When to Use Refs vs State for DOM Interaction
723Video and Audio Control with Refs
724The Ref Forwarding Problem
725The forwardRef Wrapper Function
726Basic forwardRef Pattern
727TypeScript with forwardRef
728Forwarding Refs to Nested Components
729useImperativeHandle for Custom Ref APIs
730Common forwardRef Use Cases
731When NOT to Forward Refs
732The ref Prop in React 19
733Auto-focusing Inputs on Mount
734Imperative Focus in Event Handlers
735Scrolling to Elements with scrollIntoView
736Smooth Scrolling with Behavior Options
737Scroll to Top on Navigation
738Measuring Element Dimensions with getBoundingClientRect
739Responsive Layouts with ResizeObserver
740Detecting Visibility with IntersectionObserver
741Managing Third-Party Library Instances
742Combining Multiple Ref Patterns in One Component

React

701What useRef is: A Mutable Box
702The Key Difference: useRef vs useState
703Creating a Ref with useRef
704Reading and Writing ref.current
705Refs Survive Re-renders
706Common Use Case: Storing Previous Values
707Common Use Case: Counters and Flags
708Common Use Case: Avoiding Stale Closures
709Refs in useEffect: Tracking Component Lifecycle
710When NOT to Use useRef for Values
711Refs Are Not Reactive
712The ref.current Timing Guarantee
713The ref Prop: Accessing DOM Nodes Directly
714Creating and Attaching Refs to Elements
715Accessing current After Mount
716Common DOM Operations: Focus
717Common DOM Operations: Scroll
718Common DOM Operations: Measuring Elements
719Refs on Built-in Components vs Custom Components
720The Ref Callback Pattern
721Multiple Refs in Lists
722When to Use Refs vs State for DOM Interaction
723Video and Audio Control with Refs
724The Ref Forwarding Problem
725The forwardRef Wrapper Function
726Basic forwardRef Pattern
727TypeScript with forwardRef
728Forwarding Refs to Nested Components
729useImperativeHandle for Custom Ref APIs
730Common forwardRef Use Cases
731When NOT to Forward Refs
732The ref Prop in React 19
733Auto-focusing Inputs on Mount
734Imperative Focus in Event Handlers
735Scrolling to Elements with scrollIntoView
736Smooth Scrolling with Behavior Options
737Scroll to Top on Navigation
738Measuring Element Dimensions with getBoundingClientRect
739Responsive Layouts with ResizeObserver
740Detecting Visibility with IntersectionObserver
741Managing Third-Party Library Instances
742Combining Multiple Ref Patterns in One Component

← React

Lesson 739 of 2,396·19. useRefPro lesson

Responsive Layouts with ResizeObserver

Attach a ResizeObserver to a ref in useEffect to track element size changes and update state.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course