Unnecessary re-renders by just hovering over a CommandItem.

[Etheirystech]

As the title says, just hovering over CommandItem makes it re-render.

CleanShot.2025-07-14.at.19.20.42.mp4

This is the only code I wrote:

I don't know if there's any other issues, I just narrowed it down to this since I'm using the combobox component from shadcn.

[FarooqAlaulddin]

Interesting.. Vercel seems to be doing a better job with this. Probably due to usecmdk hook.

Screen.Recording.2025-09-07.at.2.21.52.PM.mov

---

Update

The problem is that hovering and keyboard navigation both trigger the same global state update as if the user actually selected the item, causing "unnecessary" (might depends on your use case) re-renders across the entire component tree.

Current behavior

Video

Fix

Modify the Item component to separate visual hover state from logical selection state:

const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) => {
  const id = useId()
  const ref = React.useRef<HTMLDivElement>(null)
  const groupContext = React.useContext(GroupContext)
  const context = useCommand()
  const propsRef = useAsRef(props)
  const forceMount = propsRef.current?.forceMount ?? groupContext?.forceMount
  const [isVisuallyHighlighted, setIsVisuallyHighlighted] = React.useState(false)

  useLayoutEffect(() => {
    if (!forceMount) {
      return context.item(id, groupContext?.id)
    }
  }, [forceMount])

  const value = useValue(id, ref, [props.value, props.children, ref], props.keywords)

  const store = useStore()
  const selected = useCmdk((state) => state.value && state.value === value.current)
  const render = useCmdk((state) =>
    forceMount ? true : context.filter() === false ? true : !state.search ? true : state.filtered.items.get(id) > 0,
  )

  React.useEffect(() => {
    const element = ref.current
    if (!element || props.disabled) return
    element.addEventListener(SELECT_EVENT, onSelect)
    return () => element.removeEventListener(SELECT_EVENT, onSelect)
  }, [render, props.onSelect, props.disabled])

  function onSelect() {
    select()
    propsRef.current.onSelect?.(value.current)
  }

  function select() {
    store.setState('value', value.current, true)
  }
  
  function handlePointerEnter() {
    if (props.disabled || context.getDisablePointerSelection()) return
    setIsVisuallyHighlighted(true)
  }

  function handlePointerLeave() {
    setIsVisuallyHighlighted(false)
  }

  if (!render) return null

  const { disabled, value: _, onSelect: __, forceMount: ___, keywords: ____, ...etc } = props

  return (
    <Primitive.div
      ref={composeRefs(ref, forwardedRef)}
      {...etc}
      id={id}
      cmdk-item=""
      role="option"
      aria-disabled={Boolean(disabled)}
      aria-selected={Boolean(selected || isVisuallyHighlighted)}
      data-disabled={Boolean(disabled)}
      data-selected={Boolean(selected || isVisuallyHighlighted)}
      onPointerEnter={handlePointerEnter}
      onPointerLeave={handlePointerLeave}
      onClick={disabled ? undefined : onSelect}
    >
      {props.children}
    </Primitive.div>
  )
})

Now..

Video