Refs & Portals

Advanced DOM Access & Value Management

• Accessing DOM Elements with Refs
• Managing Values with Refs
• Exposing API Functions from Components
• Detaching DOM Rendering from JSX Structure with Portals

(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)

State vs Refs

State

• Causes component re-evaluation (re-execution) when changed
• Should be used for values that are directly reflected in the UI
• Should not be used for “behind the scenes” values that have no direct UI impact

Refs

• Do not cause component re-evaluation when changed
• Can be used to gain direct DOM element access (→ great for reading values or accessing certain browser APIs)