solid-syntax-components

Destructuring props breaks SolidJS reactivity by detaching property access from the reactive proxy. To preserve reactivity, access props directly or use splitProps and mergeProps to manage prop subsets safely without losing reactive tracking.

To maintain reactivity when handling children in SolidJS, use the children() helper to resolve child components safely. This ensures proper reactive tracking and avoids common pitfalls when passing nested content through ParentComponent types.

Use splitProps in SolidJS to separate props into distinct reactive groups for targeted component access, and use mergeProps to combine multiple prop sources while preserving reactivity. Both prevent the reactivity loss caused by manual object spreading.

SolidJS Component types define standard components, ParentComponent types handle nested children safely, and FlowComponent types manage control flow structures like Show or Switch. Each enforces specific prop access and child handling patterns to preserve reactivity.

TypeScript is required to effectively use these SolidJS component patterns, as the Skill relies on SolidJS 1.x/2.x with TypeScript to enforce proper typing for Component, ParentComponent, VoidComponent, and FlowComponent definitions.

To use directives and refs safely in SolidJS components, apply the use: directive syntax for DOM element behavior and ensure refs are accessed safely without breaking the reactive boundary. This Skill provides patterns for correct event delegation and ref handling.