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