downshift: Infinite render loop when the toggle button's ref is stored in a state variable

Experiencing this issue as well. Originally, I noticed this as we use Downshift alongside Floating UI which uses this method to store their refs through a callback ref - I’ve replicated that behaviour in CodeSandbox as well.

I believe this comment in the Formik issue is similar to what we’re experiencing, with the stack trace pointing to the handleRefs function.

Also similar to the other issue reported with Formik, it seems like the itemClick function is being called multiple times (also logged in the code sandbox above as well).

Hi @silviuaavram, problem seems to be on getToggleButtonProps when i pass ref: setReference from floating-ui i have error:

If the ref prop is not passed, everything works fine. If i will pass ref directly to button works everthing fine but i have other error from downshift: downshift: The ref prop “ref” from getToggleButtonProps was not applied correctly on your element.

What does not make sense at all is why only the clicking items triggers this infinite loop. Toggling the button works, arrow keys work, enter key works.

So far I can only tell that, after the clicking action happens, the dispatch kicks a ItemClick state change, state changes, render happens, and then the useControlledReducer will go wild. It will re-calculate state with the ItemClick state change, apparently the new state is different, another render happens, then the re-calculate happens again, and so on.

Hi

I’ve run into the same kind of the issue today, If you look closer into implementation it does make sense that re-render occurs, following props getters:

• getMenuProps
• getInputProps
• getToggleButtonProps

Are calling ref callback (in this case, setState) when we call getXProps getter. If you’re using setState for storing ref you’re running into setState/re-render loop, pseudo code:

function Component() {
  const combobox = useCombobox({ items: [] });
  const [ref, setRef] = useState(null)

  return <div {...combobox.getToggleButtonProps({ ref: setRef })} />
}

getToggleProps() {
   ....
   refs.forEach(() => ref(node)) //call setRef (which is actually `setState` call) and re-renders if underlying dom node is different (different reference).
   ... 
}

One thing is weird to me though, why this is only reproducible on touch devices. That’s why my theory might be completely invalidated by downshift team.

My fix for this issue is wrapping call getXProps into useMemo with proper dependencies. In your case @aliceHendicott my fix is:

  const setReference = useCallback(
    (node) => {
      _setReference(node);
    },
    [_setReference]
  );

  const toggleProps = useMemo(() => {
    return getToggleButtonProps({ ref: setReference });
  }, [setReference]);
  
  <div {...toggleProps} />