How to use the fastdom.measure function in fastdom

calculate() {
    fastdom.measure(() => {
      this.refs.content.style.width = '';
      // Content
      const content = this.refs.content;
      const contentRect = content.getBoundingClientRect();
      const contentPadding = this.getPaddingTop(content);
      // Calculate the extra offset added by any other fixed elements above this one
      const fixedElements = this.fixedElements ? $(this.fixedElements) : [];
      const fixedOffset = fixedElements.reduce((offset, el) => {
        return offset + el.getBoundingClientRect().height;
      }, 0);
      this.setState({
        contentRect,
        contentTop: contentPadding + fixedOffset,
        scrollOffset: contentRect.top + window.pageYOffset - fixedOffset - contentPadding
      });
    });

listenToUnreadMessages() {
    const {
      handleReadMessage,
      time,
      lastReadMessageTime,
    } = this.props;

    if (lastReadMessageTime > time) {
      return;
    }

    const node = this.text;

    fastdom.measure(() => {
      const {
        lastReadMessageTime: updatedLastReadMessageTime,
      } = this.props;
      // this function is called after so we need to get the updated lastReadMessageTime

      if (updatedLastReadMessageTime > time) {
        return;
      }

      if (isElementInViewport(node)) { // no need to listen, the message is already in viewport
        handleReadMessage(time);
      } else {
        this.addScrollListeners();
      }
    });
  }

export function eventbriteTicketButton(el) {
  fastdom.measure(() => {
    const eventbriteId = el.getAttribute('data-eventbrite-ticket-id');

    fetch(`/eventbrite/button/events/${eventbriteId}/ticket_classes`)
      .then(resp => resp.json())
      .then(ticketButton => {
        fastdom.mutate(() => {
          // This is a nasty hack to update the event info bar
          if (ticketButton.onSaleStatus === 'sold_out') {
            const el = document.getElementById('js-event-booking-info');
            if (el) {
              el.parentNode.removeChild(el);
            }
          }
          el.innerHTML = ticketButton.html;
        });
      });

calculate(first) {
    fastdom.measure(() => {
      // Calculate the extra offset added by any other fixed elements above this one
      const fixedElementsAbove = this.props.fixedElementsAbove
        ? $(this.props.fixedElementsAbove) : [];
      const fixedOffsetAbove = fixedElementsAbove.reduce((offset, el) =>
        offset + el.getBoundingClientRect().height
      , 0);
      // Calculate the extra offset added by any other fixed elements below this one
      const fixedElementsBelow = this.props.fixedElementsBelow
        ? $(this.props.fixedElementsBelow) : [];
      const fixedOffsetBelow = fixedElementsBelow.reduce((offset, el) =>
        offset + el.getBoundingClientRect().height
      , 0);
      // Content
      const content = this.refs.content;
      const contentRect = content.getBoundingClientRect();
      const contentPadding = this.getPadding(content, PADDING_IDENTITY());

/* using a reversed loop for efficiency */
                    for (let i = checkEnd; i >= checkStart; i--) {
                        fastdom.measure(() => {
                            if (skip) {
                                Vue.set(visibility, i, false);
                            } else if (els[i]) {
                                checkElem(i);
                                if (i < checkEnd && !visibility[i] && visibility[i + 1]) skip = true;
                            }
                        });
                    }
                } else {
                    /* If scrolling down, we only need to check visible items plus those after them */
                    if (direction == DIRECTION_DOWN) checkStart = visibility.indexOf(true);
                    for (let i = checkStart; i <= checkEnd; i++) {
                        fastdom.measure(() => {
                            if (skip) {
                                Vue.set(visibility, i, false);
                            } else if (els[i]) {
                                checkElem(i);
                                if (i > checkStart && !visibility[i] && visibility[i - 1]) skip = true;
                            }
                        });
                    }
                }

                function checkElem(i) {
                    var top = els[i].offsetTop - scrollTop;
                    var bottom = top + placeholders[i];
                    visibility[i] = bottom > -preloadHeight && top < preloadHeight;
                }
            }

export function eventbriteTicketStatus(el) {
  fastdom.measure(() => {
    const eventbriteId = el.getAttribute('data-eventbrite-ticket-id');

    fetch(`/eventbrite/button/events/${eventbriteId}/ticket_status`).then(resp => resp.json()).then(ticketButton => {
      fastdom.mutate(() => {
        el.innerHTML = ticketButton.html;
      });
    });
  });
}

isValid = false;
						return;
					}

					const domCell = table.body.cell(e.state.rowIndex, e.state.columnIndex);
					if (isValid) {
						domCell.addClass('q-grid-animate');
						element.classList.add('q-grid-active');

						this.job(() => {
							element.classList.remove('q-grid-active');
							domCell.removeClass('q-grid-animate');
						});
					}

					fastdom.measure(() => {
						const target = domCell.element;
						const scrollState = model.scroll();
						const top = (target.offsetTop - scrollState.top) + 'px';
						const left = (target.offsetLeft - (cell.column.pin ? 0 : scrollState.left)) + 'px';
						const width = target.offsetWidth + 'px';
						const height = target.offsetHeight + 'px';

						fastdom.mutate(() => {
							element.style.top = top;
							element.style.left = left;
							element.style.width = width;
							element.style.height = height;
						});
					});

					isValid = true;

handleMessageInViewport() {
    if (!this.ticking) {
      fastdom.measure(() => {
        const node = this.text;
        const {
          handleReadMessage,
          time,
          lastReadMessageTime,
        } = this.props;

        if (lastReadMessageTime > time) {
          this.removeScrollListeners();
          return;
        }

        if (isElementInViewport(node)) {
          handleReadMessage(time);
          this.removeScrollListeners();
        }