Senior
Frontend
Engineer

// On mobile: reuse cached size when scrolling backward
// prevents layout thrash from ResizeObserver firing mid-scroll
measureElement: isMobile
  ? (element, entry, instance) => {
      const dataIndex = instance.indexFromElement(element);
      if (
        instance.scrollDirection === "backward" &&
        instance.measurementsCache?.[dataIndex]
      ) {
        return instance.measurementsCache[dataIndex].size;
      }
      return measureElement(element, entry, instance);
    }
  : measureElement

// Restore measurements cache so virtualizer knows item sizes
// before rendering — eliminates flash of wrong-sized items
React.useEffect(() => {
  if (isWindowVirtualizer(virtualizer)) {
    virtualizer.setOptions({
      ...virtualizer.options,
      initialMeasurementsCache: getInitialMeasurementsCache({
        scrollConfigStorageKey,
      }),
    });
  }
}, [scrollConfigStorageKey, virtualizer]);

// Compensate for dynamic header height changes between navigations
React.useLayoutEffect(() => {
  const headerHeight = getHeaderHeight({
    scrollConfigStorageKey,
    lastScrollRestorationKey,
  });
  if (headerHeight) {
    headerRef.current?.setAttribute(
      'style', `--min-height: ${headerHeight}px`
    );
  }
}, [headerRef, lastScrollRestorationKey, scrollConfigStorageKey]);