When an update is triggered, sometimes further calculations on the DOM which might trigger layouts/ reflows are required to execute a task. In general the best performance is archive by first reading all the values in one badge and later update the DOM again. With multiple components in one page this can become difficult.
The optional recalculateLayoutBeforeUpdate
property, which accepts a function, will allow to exactly handle those reads in one badge for all components to later perform the update:
- first all
recalculateLayoutBeforeUpdate
functions for all components are executed. - second all
onUpdate
function are called which receive the value returned fromrecalculateLayoutBeforeUpdate
as the second argument.
This option is available for
- ObserveViewport
- useLayoutSnapshot
<ObserveViewport
recalculateLayoutBeforeUpdate={() => el.getBoundingClientRect()}
onUpdate={({ scroll }, rect) => console.log('Top offset: ', scroll.y + rect.top))}
/>
const Component = () => {
const offsetTop = useLayoutSnapshot(
({ scroll }) => scroll.y + el.getBoundingClientRect().top
);
}