fix: replace React.createElement with jsx runtime

[stipsan]

Description

Before the JSX transform were introduced it didn't really matter if you called React.createElement directly, or if you used JSX.
With

export default function Component(props) {
  const {icon: Icon} = props

  return <Icon />
}

as input, you got

export default function Component(props) {
  var Icon = props.icon;
  return /*#__PURE__*/ React.createElement(Icon, null);
}

as output. In that world you might as well call it directly, as it's functionally equivalent:

import {createElement} from 'react'

export default function Component(props) {
  return createElement(props.icon)
}

Since then the entire ecosystem has moved to the jsx transform, that includes our vite when using sanity dev|build|deploy, as well as publishing libraries with @sanity/pkg-utils, and most other build tooling like Parcel, tsup etc etc.

With the new transform it's not just a new function being used, it's from a different, standalone export, and its function argument semantics are different:

import { jsx as _jsx } from "react/jsx-runtime";
export default function Component(props) {
  var Icon = props.icon;
  return /*#__PURE__*/ _jsx(Icon, {});
}

On top of that, React 19 introduces new features that are only available if the jsx-runtime transform is used, which isn't supported with createElement.
For example using ref as a prop, instead of using React.forwardRef, requires it:

// React 18 requires a wrapper in function components to forward refs to the dom node
const LoadingIcon = React.forwardRef(
  function(props, ref) {
    return <svg ref={ref} />
  }
)

// React 19 supports ref as a prop
function LoadingIcon(props) {
  return <svg ref={props.ref} />
}

The React 19 <LoadingIcon /> only works if the JSX transform is used (repl):

export default function Component(props) {
  const {icon: Icon} = props
  const ref = useRef()

  return <Icon ref={ref} />
}

// Called as <Component icon={LoadingIcon} />

When using createElement it fails (repl):

import {createElement, useRef} from 'react'

export default function Component(props) {
  const ref = useRef()

  // Due to `createElement` being used, the `ref` won't be set since `LoadingIcon` isn't wrapped in `React.forwardRef`
  return createElement(props.icon, {ref})
}

What to review

Is the linter rule addition that blocks React.createElement clear enough?

Testing

If tests pass we should be good.

Notes for release

Replaced React.createElement calls in internals with the JSX runtime, unlocking the React 19 performance improvements to JSX, as well as the ability to use ref as a prop instead of React.forwardRef wrappers.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2024 9:31am
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2024 9:31am
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2024 9:31am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2024 9:31am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Dec 18, 2024 9:31am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Dec 18, 2024 9:13 AM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 13s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	14s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	41s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	56s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	28s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	15s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	29s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 13s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	2m 44s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 47s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	14s	3	9	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	30s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 53s	21	0	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

[github-actions]

⚡️ Editor Performance Report

Updated Wed, 18 Dec 2024 09:24:19 GMT

Benchmark	reference latency of sanity@latest	experiment latency of this branch	Δ (%) latency difference
article (title)	26.3 efps (38ms)	25.0 efps (40ms)	+2ms (+5.3%)	✅
article (body)	63.3 efps (16ms)	72.5 efps (14ms)	-2ms (-/-%)	✅
article (string inside object)	24.4 efps (41ms)	26.3 efps (38ms)	-3ms (-7.3%)	✅
article (string inside array)	22.2 efps (45ms)	23.8 efps (42ms)	-3ms (-6.7%)	✅
recipe (name)	48.8 efps (21ms)	50.0 efps (20ms)	-1ms (-2.4%)	✅
recipe (description)	55.6 efps (18ms)	55.6 efps (18ms)	+0ms (-/-%)	✅
recipe (instructions)	99.9+ efps (5ms)	99.9+ efps (5ms)	+0ms (-/-%)	✅
synthetic (title)	19.2 efps (52ms)	18.9 efps (53ms)	+1ms (+1.9%)	✅
synthetic (string inside object)	19.4 efps (52ms)	20.0 efps (50ms)	-2ms (-2.9%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	38ms	41ms	52ms	263ms	170ms	10.7s
article (body)	16ms	18ms	28ms	106ms	251ms	5.5s
article (string inside object)	41ms	44ms	53ms	193ms	141ms	7.2s
article (string inside array)	45ms	46ms	50ms	161ms	164ms	7.1s
recipe (name)	21ms	22ms	24ms	47ms	0ms	7.3s
recipe (description)	18ms	20ms	21ms	33ms	0ms	4.6s
recipe (instructions)	5ms	7ms	8ms	18ms	0ms	3.2s
synthetic (title)	52ms	56ms	61ms	255ms	583ms	13.4s
synthetic (string inside object)	52ms	58ms	70ms	705ms	1339ms	9.0s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	40ms	50ms	92ms	527ms	924ms	10.9s
article (body)	14ms	16ms	18ms	37ms	65ms	4.8s
article (string inside object)	38ms	40ms	59ms	170ms	151ms	6.7s
article (string inside array)	42ms	44ms	55ms	221ms	142ms	7.1s
recipe (name)	20ms	22ms	27ms	45ms	0ms	8.1s
recipe (description)	18ms	20ms	23ms	40ms	0ms	4.6s
recipe (instructions)	5ms	7ms	9ms	18ms	0ms	3.1s
synthetic (title)	53ms	55ms	61ms	445ms	819ms	17.8s
synthetic (string inside object)	50ms	55ms	63ms	443ms	868ms	8.0s

📚 Glossary

column definitions

• benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".
• latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.
• p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.
• p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.
• p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.
• blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.
• test duration — how long the test run took to complete.

[stipsan]

This change allows ScrollContainer to be optimized by React Compiler:

• before
• after

[juice49]

Thank you for the detailed explanation! This looks good to me.