The code from react-measure takes advantage of the new MutationObservers present in current browsers. MSDN has this to say about it:
Additionally, mutation observers are designed to record multiple changes before notifying your observer. They batch mutation records to avoid spamming your app with events. By contrast, mutation events are synchronous and interrupt normal code execution to notify your app of mutations. Despite the delayed notification model employed by mutation observers, your apps's observer is still guaranteed to receive (and have a chance to process) all the mutation records before the next repaint.
A react-measure's MutationObserver gets an array of MutationRecords, but the example code just grabs the first one:
<Measure
whitelist={['height']}
shouldMeasure={(mutations) => {
// don't update unless we have mutations available
if(mutations) {
return mutations[0].target
} else {
return false
}
}}
// notice how target gets passed into onMeasure now
onMeasure={(dimensions, mutations, target) => {
this.setState({dimensions})
}}
>
<div>
I can do cool things with my dimensions now :D
</div>
</Measure>
Sadly the readme doesn't have anything to say about why this works, and neither do MDN or MSDN. How do I know which MutationRecord to pass on?