Discussion on: How State Management works? Dead simple SM in Vanilla JavaScript

[artydev]

Thank you for your tips
You are totally right if you have
few elements to update.

Regards

[Viridi]

No problem artydev. You can of course always fall back on a library when you have a lot of re-rendering going on. I believe that to make the right decision you need to understand what is going on under the hood. There are a lot of tutorials on diffing and VDom to be found on the internet for those interested.

[Vijay Pushkin]

Hi there Viridi. Thanks for your input.

But optimising and moving all the elements to HTML wasn't the point of this article

[Viridi]

Hi Vijay Pushkin,

You are absolutely right. artydev and Matt Kimek started a discussion about optimization. I just hooked in to that. Your post was about handling state in vanilla javascript and you did a good job on that.

[artydev]

And only for the pleasure , here is a case when using a library worth it :-)

<div class="my-chrono"></div>
<div class="my-chrono"></div>
<div class="my-chrono"></div>
<div class="my-chrono"></div>
<div class="my-chrono"></div>
<div class="my-chrono"></div>

import {define} from 'wicked-elements';

let Counter = function () {
  let count = 0;  
  let disabled = false;
  let timer;
  let start = () => {timer = setInterval(() => { count += 1; disabled = true; m.redraw()}) };
  let stop = () => {clearInterval(timer); disabled = false; m.redraw()};
  let reset = () => {stop(); count = 0};
  let disable = (status) => status;
  let view = () => [
    m(".wrap", 
      m("h1",  count ), 
        m("",
        m("button", {onclick : start, disabled : disabled}, "start"),
        m("button", {onclick : stop}, "stop"),
        m("button", {onclick : reset}, "reset")
      ) 
    )
  ]
  return  { view }
}

function renderComp(target, component) {
   m.mount(target, component);
}

define(".my-chrono", {
   init() {
     renderComp(this.element, Counter);
   } 
})

You can test it here :

MulipleCounters