dynamic

Returns a stable Component whose identity is driven by a reactive (and optionally async) source. The returned component can be used anywhere a normal component is used; children and props flow through JSX as usual.

source may return a component, a native tag name ('input', 'textarea', etc.), undefined, or a Promise of any of the above. A pending promise propagates as NotReadyError through the surrounding reactive scope, so async swaps compose with <Loading> boundaries the same way as lazy.

dynamic() is the canonical API: it returns a stable component identity and composes with lazy() and routing. Use <Dynamic> when the choice happens at a JSX callsite.

Import

import { dynamic } from "@solidjs/web";

Type signature

function dynamic<T extends ValidComponent>(
  source: () => T | Promise<T> | null | undefined | false
): Component<ComponentProps<T>>;

Examples

// `source` can return either a custom Component or a native tag
// name — they're interchangeable, and the returned reference is a
// stable Component you can use anywhere a normal one would go.
const Field = dynamic(() => (multiline() ? RichTextEditor : "input"));
return <Field value={value()} onInput={onInput} />;