Home > @pago/reactive > wrap

wrap() function

Converts a Reactive Function Component into a React Function Component. A Reactive Function Component returns a render function which is automatically tracked. If none of its input values have changed, the render function will not execute during consequitive renderings of the component. Instead, the old virtual DOM tree will be returned, enabling frameworks like React and Preact to bail out of rendering early on.

It is usually a better developer experience to configure your Build tool to use @pago/reactive as the @jsxImportSource or the @jsxFactory.

Signature:

export declare function wrap<T extends object>(construct: (props: T) => RenderFunction | RenderResult): {
    (props: T): RenderResult;
    displayName: any;
};

Parameters

Parameter Type Description
construct (props: T) => RenderFunction | RenderResult A Reactive Function Component

Returns:

{ (props: T): RenderResult; displayName: any; }

Remarks

When given a standard React Function component, it will notice that it isn’t a Reactive Function Component and bail out without causing significant overhead. Thus you don’t really need to care about whether you are using it with a React Function Component or a Reactive Function Component.