prefer-observer-apis.md

prefer-observer-apis

📝 Prefer observer APIs over resize and scroll listeners with layout reads.

💼🚫 This rule is enabled in the ✅ recommended config. This rule is disabled in the ☑️ unopinionated config.

Prefer ResizeObserver and IntersectionObserver over resize and scroll listeners that synchronously read layout.

This rule only reports listeners with layout or viewport geometry reads. Plain scroll position listeners are ignored because an observer API is not always a better replacement.

Examples

// ❌
window.addEventListener('resize', () => {
	element.classList.toggle('is-small', element.offsetWidth < 500);
});

// ✅
new ResizeObserver(entries => {
	for (const entry of entries) {
		entry.target.classList.toggle('is-small', entry.contentRect.width < 500);
	}
}).observe(element);

// ❌
window.addEventListener('scroll', () => {
	element.classList.toggle('is-visible', element.getBoundingClientRect().top < window.innerHeight);
});

// ✅
new IntersectionObserver(entries => {
	for (const entry of entries) {
		entry.target.classList.toggle('is-visible', entry.isIntersecting);
	}
}).observe(element);

// ✅
window.addEventListener('scroll', () => {
	updateScrollPosition(window.scrollY);
});

Limitations

Only inline listener functions, local function declarations, and local const function listeners are checked. Function declaration reassignments are not tracked. Dynamic event names are ignored unless TypeScript type information proves the value is exactly 'resize' or 'scroll'. Direct type assertions on wider dynamic names are ignored. Opaque listener references are ignored to avoid false positives.