Working with Refs & Portals

React ↔ Angular reference. React examples use React 19 + TypeScript. Angular examples use modern Angular (standalone components, signals, viewChild(), inject(), @if/@for).

Test yourself

11 questions

1
Refs for DOM Access (useRef)
A ref is an object created with useRef() whose .current property holds a value that persists across renders. Attached to a JSX element, .current points to the real DOM node.
2
State vs Refs (and Refs for Non-UI Values)
State and refs both persist values across renders, but only state triggers a re-render when it changes.
3
Passing Refs to Child Components
Letting a parent attach a ref to a DOM element that lives inside a child component.
4
Exposing a Child API with useImperativeHandle
A hook that customizes what a parent receives through a ref, replacing the raw DOM node with an object of chosen methods.
5
Portals (createPortal)
createPortal(jsx, domNode) from react-dom renders JSX into a different place in the DOM while keeping it in the same position in the React component tree.
6
Summary