Handling state in MirthrilJS

tldr: there is no right or wrong way in Mithril. You can do what you want.

However, be careful not to initialise the state in the component! e.g.

// Don't do this!!
const counter = () => {
	const count = 0
	m('button', { onclick: () => count += 1))
}

// Do this
const count = 0

const counter = () => {
	m('button', { onclick: () => count += 1))
}

Otherwise every time the component is rendered it will reset the count back to zero!

Components are redrawn during DOM events. However in setInterval, for example, you will need to call m.redraw(). See more on the docs for redraw. This means, if you only update state in the onclick here, you won’t need to do anything else.

For an example of using redraw in setInterval, lets make an annoying counter, where the count decreases by one two seconds after we click.

const count = 0;

const annoyingCounter = () => {
	m('button', { onclick: () => {
		count += 1;
		setInterval(() => {count -= 1; m.redraw()}, 2000)
	}))
}

THERE IS AN ISSUE WITH THIS CODE Because count is defined at the file level and not in the component, any Counter components will share the same state. It’s like declaring a global variable for all Counters.