A question about class properties and reactivity

[munozu]

Ahoy there coming from React I'm really excited to get started with Solid and make some cool stuff. As the title suggests im curious what the best practice is for accessing a class property and rendering updates to property changes.

For example I have...

import {onCleanup} from "solid-js";

export default function App() {
	const ctx = new AudioContext()

	function onWindowClick() {
		if(ctx.state === 'suspended') {
			ctx.resume();
		}
	}

	window.addEventListener('click', onWindowClick);

	onCleanup(() => {
		window.removeEventListener('click', onWindowClick); 
	});

	return <p>{ctx.state}</p>
}

And I'm trying to render the new ctx.state which it's value will be 'running' after calling ctx.resume() on click event. However I'm not sure how to reflect the 'state' change in the DOM. I suspect it's to do with component functions being called once due to 'fine grained reactivity', but curious to know whats the best way to subscribe to updates to class properties like AudioContext.state? Will I need to duplicate it's state within a signal and call something like ctxState() but that would then require keeping the actual ctx.state and ctxState() in sync.

[ryansolid]

If you want it to update in the view or drive Solid's view you do need it represented in the reactive system. This is no different than any other frontend framework(except maybe Angular zone). React won't update for things not in state. RxJS would expect you to drive this from an event, etc... Since AudioContext is not reactive your only recourse is to have it drive reactive values. If it is something you control that's easy enough. Otherwise you will need to tap into events when it is changed outside of your code and synchronize accordingly.

I believe AudioContext has an onstatechange event. But it looks like you'd need to compare the current and previous state yourself given the way it is setup.

[munozu]

Yea that makes sense, thanks for the response you've given me something to chew on.