Sanity i18n Translate

Start Here

<Translate> (from packages/sanity/src/core/i18n/Translate.tsx) renders locale resources that contain markup, eg 'Search for "<Red>{{keyword}}</Red>"'. The components prop maps tag names in the locale string to React components or intrinsic HTML tag names.

Prefer the plain t() function when the message has no markup — <Translate> is more expensive to render.

Law: never define components inline

Components in the components map MUST be stable, module-scope components. Never define them inline during render — each render then creates a new component identity, so React unmounts and remounts the subtree (losing state, DOM, and focus). This is the same class of bug as react/no-unstable-nested-components, and it is enforced for <Translate> by the in-repo oxlint rule @repo/i18n/no-inline-translate-components (implemented in the @repo/oxlint-plugin-i18n workspace package, wired via jsPlugins in .oxlintrc.json).