Props

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 props object:

function App() {
  // Passing a prop named "name" to the MyComponent component
  return (
    <div>
      <MyComponent name="Ryan Carniato" />
    </div>
  );
}

To access the props in the child component, you use the props object:

function MyComponent(props) {
  return <div>Hello {props.name}</div>;
}

merge

merge 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.

import { merge } from "solid-js";

function MyComponent(props) {
  // Using merge to set default values for props
  const finalProps = merge({ defaultName: "Ryan Carniato" }, props);

  return <div>Hello {finalProps.defaultName}</div>;
}

// Usage: <MyComponent defaultName="Ryan Carniato" />

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.

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

Destructuring props

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:

function MyComponent(props) {
  const { name } = props; // ❌: breaks reactivity and will not update when the prop value changes
  const name = props.name; // ❌: another example of breaking reactivity
  const name = () => props.name; // ✓: by wrapping `props.name` into a function, `name()` always retrieves its current value
}

omit

omit is a utility function that creates a reactive view of a props object with specific keys removed. It provides a way to extract "rest" props without breaking reactivity:

import { omit } from "solid-js";

function ParentComponent(props) {
  // Create a view without 'name' and 'age'
  const restProps = omit(props, "name", "age");

  return (
    <div>
      <Greeting name={props.name} />
      <PersonalInfo age={props.age} />
      <OtherComponent {...restProps} />
    </div>
  );
}

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.

import { children } from "solid-js";

function ColoredList(props) {
  const safeChildren = children(() => props.children);

  return <>{safeChildren()}</>;
}

Prop drilling

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.