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:

export const Slots = forwardRef(function Slots(
  { slots }: { slots: ReactNode[] },
  ref: Ref<HTMLDivElement>,
) {
  return (
    <div ref={ref}>{slots}</div>
    //             ^^^^^^^
  )
})

runtime.registerComponent(Slots, {
  type: '@acme/list-of-slots',
  label: 'Slots',
  props: {
    slots: List({ label: 'Slots', type: Slot() }),
  },
})

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:

export const Slots = forwardRef(function Slots(
  { slots }: { slots: ReactNode[] },
  ref: Ref<HTMLDivElement>,
) {
  return (
-    <div ref={ref}>{slots}</div>
+    <div ref={ref}>{slots.map((slot, i) => (<Fragment key={i}>{slot}</Fragment>))}</div>
  )
})

Here is the link to the official release notes.