Skip to main content Accessibility Feedback
Advanced Techniques

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);
});

Try batch rendering on CodePen →