We've seen how you can manage more complex state in your Dojo applications with Containers, but with the release of Dojo 4 we now have access to a new @watch decorator. This very useful for managing the internal state of your widgets, because you no longer have to concern yourself with having to call a widgets invalidate() method if you don't want to. For example, let's say that I want to have a simple clock widget in my application that is just going to display the current time. For demo purposes, I'll display the time up to the second. I can create a Clock widget that will do exactly that.

class Clock extends WidgetBase {
  // use watch decorator so that any updates
  // to this property will now call the
  // internal invalidate() method and
  // rerender my widget
  @watch() private _currentTime = new Date();

  // a widget lifecycle method that is called
  // when a widget is added to the DOM
  onAttach() {
    // update time every second
    setInterval(() => {
      this._currentTime = new Date();
    }, 1000);
  }

  protected render() {
    return v("h1", { classes: css.root }, [
      `Time: ${this._currentTime.toLocaleTimeString()}!`
    ]);
  }
}

As you can see, this greatly simplifies my widget so that I can just update my internal state without having to worry about invalidating my widget. This is powerful stuff! Here is a live demo of this application.

Code Sandbox

There have been some other great updates to Dojo 4 such as a simplified render method to mount Dojo widgets and much more!