Upgrading to 0.22.0

If you haven’t upgraded to 0.21.0 please read the upgrading guide.

v0.22.0 of the runtime introduces some performance improvements to internal runtime rendering functions.

Breaking Changes

ReactNode[] props

Previously, registered components that accepted a list of ReactNodes, like the example Slots component below, could render the list by simply interpolating its value in JSX:

1
export const Slots = forwardRef(function Slots(
2
  { slots }: { slots: ReactNode[] },
3
  ref: Ref<HTMLDivElement>,
4
) {
5
  return (
6
    <div ref={ref}>{slots}</div>
7
    //             ^^^^^^^
8
  )
9
})
10
11
runtime.registerComponent(Slots, {
12
  type: '@acme/list-of-slots',
13
  label: 'Slots',
14
  props: {
15
    slots: List({ label: 'Slots', type: Slot() }),
16
  },
17
})

This worked because the slots value was never actually passed as a list of ReactNodes. Instead, it was passed as a single ReactNode representing an internal component rendering the list as a recursive cons-like structure.

If you have registered components that expect a list of ReactNodes and rely on this undocumented behavior, you must update your code to wrap each node in a React.Fragment with a corresponding key:

1
export const Slots = forwardRef(function Slots(
2
  { slots }: { slots: ReactNode[] },
3
  ref: Ref<HTMLDivElement>,
4
) {
5
  return (
6
-    <div ref={ref}>{slots}</div>
7
+    <div ref={ref}>{slots.map((slot, i) => (<Fragment key={i}>{slot}</Fragment>))}</div>
8
  )
9
})

Here is the link to the official release notes.