classes or functional approach?

[bnn1]

all cool kids are now using classes for things like state management and services and everything. i don't understand why.

i mean i can only see downsides: OOP syntax (subjective), gotchas with context binding:

<script>
const counter = new Counter();
</script>

<p>Count: {counter.count}</p>
<button onclick={counter.increment}>+1</button> // won't work unless you bind increment to the counter in class constructor

does using classes have clear benefits over functions? or is it just a matter of taste? which one do you prefer and why?

[brunnerh]

Reactive classes have higher performance if many instances are used. The properties are transformed to access inner signals while for objects a Proxy is used, which has some overhead. Classes also allow fully encapsulated state via private class fields.

Personally, I would probably still prefer plain objects unless the performance boost is necessary, though I have not used Svelte 5 for anything of substantial size yet.

[ryanatkn]

Expanding on this, optimal performance is the most important factor for the library and high data/fps usecases I have, and I carry over the same patterns to most other code, and sometimes use POJOs for the simplest cases that aren't in hot paths.

It's worth noting that using classes for state doesn't necessarily mean using class methods or instance functions. A plain standalone function can mutate both a class and POJO with one interface. Immutably operating on the two has small differences, but functional code - in the side-effect-free non-mutating sense - can operate on classes. It's subtle and often conflated in learning materials, but classes aren't the same as OOP in this sense.

Here's why I don't use plain functions returning POJOs in a closure:

function create_thing() {
	let x = $state(0);

	return {
		get x() {
			return x;
		},
		set x(value) {
			x = value;
		},
	};
}

Along with the performance cost, they're more boilerplate compared to a class field:

class Thing {
	x = $state(0);
}

And classes can colocate $deriveds without boilerplate as well. I find the ability to colocate derived data important for data modeling. The convenience of POJOs continues to drop in comparison:

function create_thing_with_derived() {
	let x = $state(1);

	const doubled = $derived(x * 2);

	return {
		get x() {
			return x;
		},
		set x(value) {
			x = value;
		},
		get doubled() {
			return doubled;
		},
	};
}

const thing = create_thing_with_derived();
$state.snapshot(thing); // `{x: 1, doubled: 2}`

Including derived data in $state.snapshot is usually not what I want, because the thing can be reconstructed without it by definition - for example it's wasteful to persist derived data alongside the source data in the normal case.

You can't add a custom toJSON function to the returned object to use with $state.snapshot, you'll get the error state_snapshot_uncloneable.

Classes do have more boilerplate with toJSON in the simple case, and if you don't care about the colocated $deriveds the benefits are less, but this can be reduced with some strategies, and I don't personally mind it, and I value the pattern consistency/extensibility.

Overall, classes offer optimal performance with more control and convenience compared to POJOs returned from functions. For simple objects with no always-associated derived data outside of hot paths, using POJOs over classes makes sense.

[bnn1]

thanks for explaining this to me