Support signal values in ReactAdapterElement#render

[marcushellberg]

Describe your motivation

I'm trying to use a signal value defined in ReactAdapterElement in the render method. Changes to the signal value do not trigger re-rendering the same way is in React components in Hilla. For consistency, it would be nice if we could use signal values in the template here too.

class MarkdownElement extends ReactAdapterElement {

    markdown = signal('');

    async connectedCallback() {
        await super.connectedCallback();
        // Gets triggered when the value changes
        effect(() => console.log(this.markdown.value));
    }

    protected override render() {
        // Does not get re-rendered when the value changes
        return <ReactMarkdown>{this.markdown.value}</ReactMarkdown>;
    }
}

Describe the solution you'd like

I would like to be able to use signal values in ReactAdapterElement the same way I can in Hilla React components, as shown in the code example above.

Describe alternatives you've considered

I got it working by passing the signal value into a useState hook. It's not pretty and maintains the same state twice for no good reason.

useEffect(() => effect(() => {
        setContent(this.markdown.value);
}), []);

Additional context

@Legioth says: everything should be a signal.