Ref as a Prop, Context as Provider and Other Improvements

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Ref

An object or function that gives you access to a DOM node or a value that survives renders (Phase 8).

forwardRef

The pre-19 wrapper that let a function component receive a ref. No longer needed.

Ref callback

A function passed as ref. React calls it with the DOM node when the node is attached.

Ref cleanup

A function returned from a ref callback. React calls it when the node is removed.

Hydration

React attaching event handlers and state to HTML that the server already rendered.

Hydration mismatch

The server's HTML and the browser's first render disagree.

Custom element

An HTML tag you define yourself with JavaScript, also called a web component.

onCaughtError / onUncaughtError

Root options React calls when an error is caught by a boundary, or not caught at all.

1. 1

   Toggle the box back

   In the first example, click Toggle box twice by hand. Predict the logs: a cleanup, then a new ref attached. Each mount gets a fresh observer.

2. 2

   Remove the inner provider

   In the context example, delete the inner <ThemeContext value="sepia"> (keep its <Badge />). Predict what both badges show before and after Switch.

3. 3

   Make the clock match

   In the error example, render 10:30 on both sides. Predict which recoverable line disappears. (This is why hydration-safe code avoids reading the clock during render; Topic 20.6.)

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   **ref as a prop. A ref** (Phase 8) lets a parent reach a DOM node, for example to focus an input. Before 19, ref was special: a function component couldn't receive it unless wrapped in forwardRef((props, ref) => ...). In React 19 ref is an ordinary prop for function components: function TextField({ label, ref }) { return <input ref={ref} /> }. forwardRef still works (for libraries supporting older React) and will be deprecated later. Class components still treat ref specially: it points to the class instance. Reading element.ref on a JSX element now warns, because it's just element.props.ref.

2. 2

   Ref callback cleanup. A ref callback is a function passed as ref: React calls it with the DOM node when it's attached. Before 19 React called it again with null when the node was removed, so setup and teardown lived in two branches. In 19 the callback may return a cleanup function, like an effect: React calls the cleanup when the node is detached (or the callback changes), and then does not call the callback with null. Great for observers, third-party widgets and event listeners on a specific node. Because a returned value now means something, TypeScript rejects implicit returns such as ref={(n) => (inputRef = n)}: use a block body.

3. 3

   **<Context> as a provider.** Instead of <ThemeContext.Provider value="dark"> you write <ThemeContext value="dark"> (Topic 9.2). Read it with useContext(ThemeContext) or use(ThemeContext). .Provider still works and is planned for deprecation; a codemod converts it.

4. 4

   Better hydration errors. Hydration (Topic 20.6) is React attaching to HTML that the server already rendered. If the server HTML and the first client render differ (a time, a random number, typeof window checks), React 18 printed several vague errors. React 19 logs one error that lists the likely causes and shows a diff: lines with + are what the client rendered, - what the server sent. React then re-renders that part on the client. React 19 also tolerates unexpected tags that browser extensions or third-party scripts insert in <head> and <body>, instead of failing hydration.

5. 5

   Custom elements. A custom element (web component) is an HTML tag defined with JavaScript: customElements.define("star-rating", StarRating). React 18 passed every prop as a string attribute, so arrays, objects and numbers arrived as "[object Object]". React 19 checks whether the element has a property with that name: if it does, React sets the property with the real value (el.stars = 3), otherwise an attribute. Booleans true become empty attributes, and on + name props attach event listeners for custom events. React now passes all of the Custom Elements Everywhere tests.

6. 6

   Error reporting options. createRoot(container, options) and hydrateRoot accept onCaughtError(error, info) (an error boundary caught it), onUncaughtError(error, info) (no boundary: the root unmounted) and onRecoverableError(error, info) (React recovered on its own, for example after a hydration mismatch). info.componentStack says which components were rendering. Send them to your error service (Sentry and others) instead of patching console.error. Also new in 19: an error caught by a boundary is reported once (not re-thrown and logged twice as in 18). Other small 19 improvements: useDeferredValue(value, initialValue) takes an initial value, and <StrictMode> reuses memoised results between its double renders.

• ↔

  Dropping forwardRef simplifies components, but a library that must support React 18 still needs it; keep forwardRef in shared packages until you drop 18.

• ↔

  Root error callbacks centralise reporting, but they replace React's default console logging; log to the console yourself in development so you still see errors locally.

• I can accept ref as a prop in a function component.

• I can return a cleanup function from a ref callback.

• I can provide context with <Context value>.

• I can read a React 19 hydration error diff.

• I know how React 19 passes props to custom elements.

• I can wire onCaughtError, onUncaughtError and onRecoverableError to an error service.