Batch Rendering
With a component(), multiple reactive data updates are often batched into a single render that happens asynchronously.
// Reactive store
let todos = store(['Swim', 'Climb', 'Jump', 'Play']);
// Create a component from a template
component('#app', template);
// These three updates would result in a single render
todos.push('Sleep');
todos.push('Wake up');
todos.push('Repeat');
You can detect when a UI update happens inside a component by listening for the reef:render event.
It’s emitted directly on the element that was rendered, and also bubbles if you want to listen for all render events.
// Log whenever an element is rendered into
document.addEventListener('reef:render', function (event) {
console.log('The UI was just updated inside this element.');
console.log(event.target);
});