Prevent unnecessary execution of the displayValue callback in the ComboboxInput component

[RobinMalfait]

This PR fixes an issue where the displayValue on the ComboboxInput component is executed on every render. This PR fixes that by only executing the callback if either the value or the displayValue itself changes.

This is especially useful if you have a displayValue that is a function that does some heavy computation or that contains undeterministic code. E.g.: Math.random(), Date.now(), …

Fixes: #3044

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 20, 2024 11:34pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 20, 2024 11:34pm

[thecrypticace]

We used to useMemo for displayValue but changed it. The big difference here is the dependency array though. We'll want to make sure this doesn't break: #2090 (this is the PR where we changed it to the current impl)

[RobinMalfait]

We used to useMemo for displayValue but changed it. The big difference here is the dependency array though. We'll want to make sure this doesn't break: #2090 (this is the PR where we changed it to the current impl)

Aha good catch! But yep just updated the useMemo dependencies array where I removed the displayValue and that does indeed break the previous issue. Adding it though, makes the test pass.

When running: clear; git diff; npm run test combobox; git reset --hard; npm run test combobox you can see that the displayValue as a dependency is important.