PropsEdit this page
Props are a way to pass state from a parent component to a child component.
These read-only properties are passed to components as attributes within JSX and are accessible within the component via the
To access the props in the child component, you use the
mergeProps is a Solid utility function designed to merge multiple potentially reactive objects together.
It behaves similar to
Object.assign but will retain the reactivity of the properties being merged.
This helps ensure that when individual properties within the merged object change, their reactivity is not lost.
When merging props, if there is no existing value for a property, the value from the first object will be used. However, if a value already exists, it will be used instead, all while retaining the reactivity of the property.
Props are read-only so that child components do not directly modify the data passed by the parent. This also encourages one-way data flow, a pattern often seen to promote more predictable data management.
With Solid, destructuring props is not recommended as it can break reactivity.
Instead, you should access props directly from the
props object, or wrap them in a function to ensure they are always up-to-date:
splitProps is a utility function designed to help split a single props object into multiple sets of props, retaining the reactivity of the individual properties.
It provides a way to destructure props without breaking reactivity.
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.
It will return an array of props objects related to each set of keys, plus an additional props object containing any remaining keys.
When 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:
Passing props to children
In most instances, simply using
props within JSX will work without any issues.
However, 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.
For instances like these, Solid provides a
children helper that ensures you always get the right child components without anything unwanted happening.
Prop drilling is a term used to describe the process of passing props through multiple layers of components. While it can be a useful pattern, it can also lead to problems. When components are nested deeply, passing props through each component can become difficult to manage. Additionally, this can lead to components receiving props that they do not need, unnecessary re-renders, and trouble refactoring.
Since components in Solid do not own state, props are not needed to pass state between components, but may be used. Because of this, there may be times when you need to pass props through multiple layers of components. A common solution to this problem is to use Context to pass state to deeply nested components without having to pass props through each component in between.