Skip to content

Warn when <title> has invalid children on the client#36183

Open
Zelys-DFKH wants to merge 1 commit intofacebook:mainfrom
Zelys-DFKH:add-title-children-warning
Open

Warn when <title> has invalid children on the client#36183
Zelys-DFKH wants to merge 1 commit intofacebook:mainfrom
Zelys-DFKH:add-title-children-warning

Conversation

@Zelys-DFKH
Copy link
Copy Markdown

React has validated <title> children on the server since #33349 was merged, but those same validations never ran on the client. A developer writing <title>Hello {name}</title> in JSX would see an empty <title> in the browser with no warning, while the SSR path correctly fired a diagnostic.

This PR extracts the existing server-side validation into a shared module (ReactDOMTitle.js) and wires it into the client renderer's validatePropertiesInDevelopment. The four validated cases are unchanged in behavior:

  • Array with length > 1 (common JSX text + expression pattern)
  • Function or Symbol child
  • React element child (object with $$typeof)
  • Plain object that inherits the default toString

The shared module also fixes a pre-existing typo in the server message: "a Sybmol" becomes "a Symbol".

Tests updated:

  • New client-only test in ReactDOMComponent-test.js covering the array case
  • Three existing ReactDOMFizzServer-test.js tests updated to assert that the same warning now also fires during client hydration (without a component stack, which is expected for the hoistable hydration path)

Closes #33341

…33341)

Moves the <title> children validation that existed only in the server
renderer (ReactFizzConfigDOM) into a shared module (ReactDOMTitle) and
calls it from the client renderer's validatePropertiesInDevelopment as
well. Previously, passing multiple JSX children, a function, a symbol,
or a plain object to <title> silently produced no output or wrong output
on the client with no developer-facing warning. Now the same warnings
that fire during SSR also fire during client-side rendering.

Also fixes a typo in the original server-side message: "Sybmol" -> "Symbol".
@meta-cla meta-cla bot added the CLA Signed label Apr 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: Hoisted <title> containing more than 1 JSX child will contain nothing

1 participant