<Nest> / nest

Watch an expression and render dynamic content from it's result.

JSXNo Build

import { $, Nest } from "rvx";

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

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

import { $, nest, e } from "./rvx.js";

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

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

Signal Access & Lifecycle

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

JSXNo Build

<Nest watch={signalA}>
    {() => signalB}
</Nest>

nest(signalA, () => 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 component lifecycle.

To avoid re-rendering the component when the same values are returned, you can wrap the expression using memo or use <Show> instead.

Component expresions

The component can be omitted if the expression itself returns a component, null or undefined.

JSXNo Build

const component = $(() => <h1>Hello World!</h1>);

<Nest watch={component} />

component.value = () => <>Something else...</>;

const component = $(() => e("h1").append("Hello World!"));

nest(component)

component.value = () => "Something else...";