Reactive utilities

merge

Solid 2.0 —

mergeProps has been renamed to merge in Solid 2.0. The behavior is the same, with one important change: undefined is treated as a real value and will override, rather than being skipped.

import { merge } from "solid-js"

function merge(...sources: any): any

A reactive object merge method. Useful for setting default props for components in case the caller doesn't provide them, or for cloning the props object including reactive properties.

This method works by using a proxy and resolving properties in reverse order. This allows for dynamic tracking of properties that aren't present when the prop object is first merged.

// default props
props = merge({ name: "Smith" }, props)

// clone props
newProps = merge(props)

// merge props
props = merge(props, otherProps)

caution

undefined overrides in Solid 2.0

Unlike mergeProps in 1.x, undefined is now treated as a value that overrides:

const merged = merge({ a: 1, b: 2 }, { b: undefined })
// merged.b is undefined (not 2)

Migration

// 1.x
import { mergeProps } from "solid-js"
const props = mergeProps({ name: "default" }, props)

// 2.0
import { merge } from "solid-js"
const props = merge({ name: "default" }, props)

Report an issue with this page