Safe Element Comparison

Safe Element Comparison

remix-forms identifies components in JSX trees using child.type === Component. This pattern is central to how mapChildren injects props into the right elements. This skill covers the architecture, the rules for keeping it safe, and guidance for users.

How It Works

mapChildren in children-traversal.ts recursively walks the React element tree returned by user render functions. Callback functions in create-field.tsx and schema-form.tsx compare child.type against component references to decide which props to inject.

React element types follow these rules:

• <div> compiles to React.createElement('div') — type is the string 'div'
• <MyComponent /> compiles to React.createElement(MyComponent) — type is the function/object reference
• React.forwardRef(fn) returns a unique object — === comparison works reliably when defined at module scope
• React.cloneElement preserves .type exactly
• React Fast Refresh preserves component identity in development

If a component reference were a string like 'div', then child.type === Component would match every <div> in the tree — not just the intended component. This is why all default components are React.forwardRef wrappers with unique object identity.

Current Architecture

All default components are defined at module scope as React.forwardRef wrappers. Each renders its corresponding HTML element and nothing else. Components that render the same HTML tag (e.g. DefaultInput, DefaultCheckbox, DefaultRadio all render <input>) are separate objects with distinct identities.

create-field.tsx

schema-form.tsx

DefaultFieldError is imported from create-field.tsx and reused as the default for errorComponent in SchemaForm.

Rules for Development

Adding a new component mapping

1. Create a Default* forwardRef wrapper at module scope in the appropriate file.
2. Use it as the default parameter value — never use a string tag name.
3. If the component will be compared via child.type === in any mapChildren callback, write a test verifying plain HTML elements of the same tag are not affected.
4. Update the inventory table in this skill.

Modifying existing components

• Preserve unique identity. Each default must be its own distinct object, even when multiple defaults render the same HTML tag.
• Keep defaults at module scope. Moving them inside a function creates new references each call, breaking === comparisons and causing React remounts.

Never do

• Never use a string tag name as a default — it matches every element of that tag in the tree.
• Never wrap defaults in React.memo() — memo creates a new wrapper object; child.type === original silently fails.
• Never wrap defaults in React.lazy() — lazy also creates a wrapper that doesn't match the inner component.
• Never define defaults inside render functions — new identity each render breaks === and causes full remounts.

User-Facing Guidance

When communicating with users about component customization:

Passing custom components

• Recommended: Pass a React component (function, class, or forwardRef). The === comparison is safe because each component has a unique reference.
• Not recommended: Pass a string tag name like "div". The comparison becomes ambiguous — any element of that tag in the children function will be matched.
• When a user reports unexpected attributes on their elements, check whether they passed a string for a component prop.