Svelte · Middle · Question 8 of 75

How do you make class fields reactive?

class Todo {
  text = $state("");
  done = $state(false);
  toggle = () => { this.done = !this.done; };
}

✓Correct answer: Declare fields with $state (or assign $state first in the constructor)
2Classes are made deeply reactive by $state(new Todo())
3Extend a Reactive base class

Explanation

Class instances aren't proxied. The compiler turns $state fields into getters/setters. An arrow function keeps this correct when used as an event handler.

How do you make class fields reactive?

Explanation

Further reading

Problem with a question

Test yourself