mergeProps & splitProps in SolidJS

From the SolidJS cheat sheet ยท Props Utilities ยท verified Jul 2026

mergeProps & splitProps

Set default props with mergeProps and separate local from pass-through props with splitProps.

tsx
// Quick Reference
import { mergeProps, splitProps } from "solid-js";

// Default props
const merged = mergeProps({ color: "blue" }, props);

// Split props into groups
const [local, others] = splitProps(props, ["class", "style"]);
๐Ÿ’ก Never destructure props โ€” it reads the value once and loses reactivity
โšก splitProps returns [picked, rest] โ€” perfect for passing remaining props to DOM elements
๐Ÿ“Œ mergeProps creates a new reactive object with defaults that can be overridden
๐ŸŸข These utilities exist because destructuring breaks the reactive proxy
propsmergePropssplitProps

Continue with SolidJS

Save the full cheat sheet or work through every related task.

More SolidJS tasks

Back to the full SolidJS cheat sheet