Why is this memoized selector still causing extra renders?

BobaMilk
Tue, 07 Apr 2026 21:00:10 +0000

Hey everyone, I’m working on a small React UI and trying to cut render cost while profiling, but one panel still rerenders a lot and it makes scrolling feel a bit jittery.

import { useMemo } from "react";

function Sidebar({ items, activeId }) {
  const visible = useMemo(() => {
    return items.filter(item => item.visible);
  }, [items, activeId]);

  return visible.map(item => (
    <Row key={item.id} active={item.id === activeId} item={item} />
  ));
}

Why does this still rerender more than I expect, and am I putting the memo boundary in the wrong place?

BobaMilk