<Nest>

Render a component returned from an expression.

JSXNo Build

import { Nest, sig } from "rvx";

const message = sig({ type: "heading", value: "Hello World!" });

<Nest>
    {() => {
        const current = message.value;
        switch (current.type) {
            case "heading": return () => <h1>{current.value}</h1>;
            default: return () => <>Unknown message type.</>;
        }
    }}
</Nest>

import { Nest, sig, e } from "./rvx.js";

const message = sig({ type: "heading", value: "Hello World!" });

Nest({
    children: () => {
        const current = message.value;
        switch (current.type) {
            case "heading": return () => e("h1").append(current.value);
            default: return () => "Unknown message type.";
        }
    },
})

Returning null or undefined results in rendering nothing.

Signal Access & Lifecycle

All signals accessed from the expression will trigger a full re-render of the returned component when updated.

JSXNo Build

<Nest>
    {() => {
        signalA.access();
        return () => signalB;
    }}
</Nest>

Nest({
    children: () => {
        signalA.access();
        return () => signalB;
    },
})

• When signalA is updated, the expression re-runs, the previous component is disposed and the new component is rendered.
• Updating signalB has no effect on the expression or component lifecycle.

To avoid re-rendering the component, you can use memo or a signal directly:

JSXNo Build

function A() { ... }
function B() { ... }

<Nest>
    {memo(() => {
        return someSignal.value < 3 ? A : B;
    })}
</Nest>

const component = sig<Component | undefined>();
<Nest>{component}</Nest>

// Replace the component:
component.value = () => "Hello World!";

// Or re-render, what's already there:
component.notify();

function A() { ... }
function B() { ... }

Nest({
    children: memo(() => {
        return someSignal.value < 3 ? A : B;
    }),
})

const component = sig();
Nest({ children: component })

// Replace the component:
component.value = () => "Hello World!";

// Or re-render, what's already there:
component.notify();