How to avoid rerendering a certain component?

[kwoon]

I have a page on which a lot of widgets. All widgets frequently polls the server. And one of these widgets is the timer that simply shows the time and it has no any business logic. Timer ticks every second and every second WHOLE view is rerendered! But I want to make this a timer ticking, and only changed his view. Is there any do it or I in all cases is to use the state?

[MattMcFarland]

Can you try using a separate model for the timer widget with its own namespace? Maybe that could fix it? I think the name of this issue should be renamed though to "whole page is rendering when only a few items changed" or something like that. Also it might be helpful if we can see your code so we can view the implementation.

[kwoon]

@MattMcFarland I originally did so, but every view in my project updated with every tick.

Here example of my model

module.exports = {
  namespace: 'timer',
  state: {
    time: new Date()
  },
  reducers: {
    setTime: (data, state) => ({ time: data })
  },
  effects: {
    updateTime: (data, state, send, done) => {
      send('timer:setTime', data, done)
    }
  },
  subscriptions: [
    (send, done) => {
      setInterval(() => {
        send('timer:updateTime', new Date(), done)
      }, 1000)
    }
  ]
}

[yoshuawuyts]

@kwoon ah yeah, that's what happens with virtual-dom renders; to change a single element the whole page is re-computed and the minimal amount of changes are performed on the actual DOM.

A way to improve the rendering speed is to use thunking for individual components on the page. Given the same input, the same output is returned. The vdom-thunk package should be helpful for that.

Does this answer your question?

[MattMcFarland]

Ahhh, this must be what caused codemirror to lose focus.

[kwoon]

@yoshuawuyts Thanks! It is even better than i expected! Just like shouldComponentUpdate in React.

[YerkoPalma]

@yoshuawuyts wait, but choo use yo-yo which uses morphdom which is not virtual dom right? So the view should update properly if yo-yo#update is used? or I'm confused ❓

[kwoon]

@YerkoPalma I think this is not the best name for the package. The functionality of this package is much wider.

[YerkoPalma]

@kwoon what package?

[kwoon]

@YerkoPalma vdom-thunk

[MattMcFarland]

@YerkoPalma I agree, I'm not sure how vdom-thunk is going to work with morphdom?

[MattMcFarland]

@kwoon can you share an example when you get it working?

[yoshuawuyts]

related issue choojs/nanohtml#40

[YerkoPalma]

Well I understand the thing about the thunk function, My only doubt is why does a vdom library fits with a non vdom library?

@YerkoPalma I think this is not the best name for the package. The functionality of this package is much wider

Is that why? the vdom thunk is also compatible with native dom?