Unmount a component

[chrisbuttery]

I'm wondering how best to unmount a component.
This sort of ties in with this issue #98, where a setInterval effect is calling a reducer every second.

What would be the best approach to destroy the setInterval and the component ?

requirebin

const choo = require('choo')
const app = choo()

function init (send) {
  send('start')
}

function decrement (state) {
  if (state.count === 0) {
    // implode
  } else {
    return {count: state.count - 1}
  }
}

app.model({
  state: {
    data: 'app',
    count: 5
  },
  effects: {
    start: (action, state, send) => setInterval(() => send('tick'), 1000)
  },
  reducers: {
    tick: (action, state) => decrement(state)
  },
  subscriptions: [init]
})

function main (params, state, send) {
  return choo.view`<button>${state.count}</button>`
}

app.router((route) => [
  route('/', main)
])

setTimeout(function() {
  const tree = app.start({name: 'app'})
  document.body.appendChild(tree)
}, 3000)

[yoshuawuyts]

Use https://github.com/shama/on-load; check out #1 for current state of landing this natively in choo (it is going to land; can't exactly tell when tho).

Closing as I think this should get you there. Keep an eye on the issues in on-load and bel if you run into trouble; feel free to ask back here if there's anything else tho. Cheers! ✨