Devour/devour_data/docs/props.json

{
  "id": "b30113718c9097059d85ed83",
  "source": "solid:signals",
  "type": "github-document",
  "title": "props",
  "content": "---\ntitle: Props\nuse_cases: \u003e-\n  passing data between components, parent-child communication, component\n  configuration, default values, prop management\ntags:\n  - props\n  - components\n  - data\n  - communication\n  - mergeprops\n  - splitprops\nversion: '1.0'\ndescription: \u003e-\n  Pass and manage component props in Solid while maintaining reactivity. Learn\n  mergeProps, splitProps, and best practices.\n---\n\nProps are a way to pass state from a parent component to a child component.\nThese read-only properties are passed to components as attributes within JSX and are accessible within the component via the `props` object:\n\n```tsx\nfunction App() {\n\t// Passing a prop named \"name\" to the MyComponent component\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cMyComponent name=\"Ryan Carniato\" /\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nTo access the props in the child component, you use the `props` object:\n\n```tsx\nfunction MyComponent(props) {\n\treturn \u003cdiv\u003eHello {props.name}\u003c/div\u003e;\n}\n```\n\n## `mergeProps`\n\n[`mergeProps`](/reference/reactive-utilities/merge-props) is a Solid utility function designed to merge multiple potentially reactive objects together.\nIt behaves similar to [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) but will retain the reactivity of the properties being merged.\nThis helps ensure that when individual properties within the merged object change, their reactivity is not lost.\n\n```typescript\nimport { mergeProps } from \"solid-js\";\n\nfunction MyComponent(props) {\n\t// Using mergeProps to set default values for props\n\tconst finalProps = mergeProps({ defaultName: \"Ryan Carniato\" }, props);\n\n\treturn \u003cdiv\u003eHello {finalProps.defaultName}\u003c/div\u003e;\n}\n\n// Usage: \u003cMyComponent defaultName=\"Ryan Carniato\" /\u003e\n```\n\nWhen merging props, if there is no existing value for a property, the value from the first object will be used.\nHowever, if a value already exists, it will be used instead, all while retaining the reactivity of the property.\n\n## Destructuring props\n\nProps are read-only so that child components do not directly modify the data passed by the parent.\nThis also encourages one-way data flow, a pattern often seen to promote more predictable data management.\n\nWith Solid, destructuring props is not recommended as it can break reactivity.\nInstead, you should access props directly from the `props` object, or wrap them in a function to ensure they are always up-to-date:\n\n```typescript\nfunction MyComponent(props) {\n\tconst { name } = props; // ❌: breaks reactivity and will not update when the prop value changes\n\tconst name = props.name; // ❌: another example of breaking reactivity\n\tconst name = () =\u003e props.name; // ✓: by wrapping `props.name` into a function, `name()` always retrieves its current value\n}\n```\n\n### `splitProps`\n\n[`splitProps`](/reference/reactive-utilities/split-props) is a utility function designed to help split a single props object into multiple sets of props, retaining the reactivity of the individual properties.\nIt provides a way to destructure props without breaking reactivity.\n\n`splitProps` gives you the ability to define one or more arrays of keys that you wish to extract into separate props objects, all while retaining the reactivity of the individual properties.\nIt will return an array of props objects related to each set of keys, plus an additional props object containing any remaining keys.\n\nWhen passing props to child components, you can use `splitProps` to split the props into multiple groups, and then pass each group to the appropriate child component:\n\n```typescript\nimport { splitProps } from \"solid-js\";\n\nfunction ParentComponent(props) {\n\t// Splitting props into two groups: 'name' and 'age'\n\tconst [greetingProps, personalInfoProps, restProps] = splitProps(\n\t\tprops,\n\t\t[\"name\"],\n\t\t[\"age\"]\n\t);\n\n\t// Using greetingProps and personalInfoProps in the current component\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cGreeting {...greetingProps} /\u003e\n\t\t\t\u003cPersonalInfo {...personalInfoProps} /\u003e\n\t\t\t{/* restProps can be passed down or used as needed */}\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Passing props to children\n\nIn most instances, simply using `props` within JSX will work without any issues.\nHowever, there are some cases where accessing `props.children` multiple times can introduce problems and unexpected behaviours, such as repeated creation of child components or elements.\nFor instances like these, Solid provides a [`children`](/reference/component-apis/children) helper that ensures you always get the right child components without anything unwanted happening.\n\n```typescript\nimport { children } from \"solid-js\";\n\nfunction ColoredList(props) {\n\tconst safeChildren = children(() =\u003e props.children);\n\n\treturn \u003c\u003e{safeChildren()}\u003c/\u003e;\n}\n```\n\n## Prop drilling\n\nProp drilling is a term used to describe the process of passing props through multiple layers of components.\nWhile it can be a useful pattern, it can also lead to problems.\nWhen components are nested deeply, passing props through each component can become difficult to manage.\nAdditionally, this can lead to components receiving props that they do not need, unnecessary re-renders, and trouble refactoring.\n\nSince components in Solid do not own state, props are not needed to pass state between components, but may be used.\nBecause of this, there may be times when you need to pass props through multiple layers of components.\nA common solution to this problem is to use [Context](/concepts/context) to pass state to deeply nested components without having to pass props through each component in between.",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/components/props.mdx",
  "metadata": {
    "path": "src/routes/concepts/components/props.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 5530,
    "source_type": "github"
  },
  "hash": "d4f9118e7bf76aed6e2559ad6ea43e928764506f408df4df4f90d3754632dacb",
  "timestamp": "2026-02-23T11:43:00.186428411+01:00"
}