Mithril.js: [Question] Redraw

[pcariel]

Hi, friend.

var DateComponent = {
  oninit: function (vnode) {
    var self = vnode.state;
    self.month = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", 
                         "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
    self.day = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];

    self.show = function () {
      self.date = new Date();
      self._ = self.day[self.date.getDay()] + ", " +  
                      self.date.getDate() + " " +
                      self.month[self.date.getMonth()] + " de "  +
                      self.date.getFullYear() + " " + self.date.getHours() + ":" +
                      self.date.getMinutes() + ":" + self.date.getSeconds() 
      m.redraw();
    };
    vnode.state.interval = setInterval(self.show, 1000)
  },
  onremove: function (vnode) {
    clearInterval(vnode.state.interval);
  },
  view: function (vnode) {
    return m("label", vnode.state._);
  }
};

var LayoutMain = {
  view: function (vnode) {
    return m(".layout", vnode.children);
  },
};

m.route(root, "/", {
  "/": {
    onmatch: function () {
      if (false) m.route.set("/auth")
    },
    render: function () {
      console.info("Testing")
      return m(LayoutMain, m(HomePage));
    },
  },
});

Is it normal that every time I call "redraw" I draw the entire component of the router?
debug console "300 Printer Testing"
What do you recommend me to do? To avoid poor performance in my application?

thanks, sorry for my bad english.

[barneycarroll]

Hi @pcariel, it's absolutely normal that all components should be recomputed on redraw - this is essential for Mithril to work. This is standard behaviour, and Mithril has extremely good performance. Executing the component functions and analysing the results is trivial work - the DOM mutation (where performance bottlenecks usually occur) is always the minimum necessary, so in the case of draws after the first, the only part of the DOM that will be mutated is the text node representing the date.

You can see this by attaching a DOM mutation observer to the document: https://jsbin.com/mumanuj/edit?js,console,output

[tivac]

More details on the autoredraw system are also available on the official site.