useEventListener bug in controls

[alvarosabu]

Describe the bug

Some controls have long-standing bugs where changing props causes duplicate events to be added.

E.g., flipping makeDefault in CameraControls causes duplicate events to be added. This will add 100 duplicate events:

const makeDefault = shallowRef(true)
// Flip `makeDefault` 100 times, add 100 events! Lol
Array.from({length: 100}).fill(0).forEach(
  (_, i) => setTimeout(
    () => {
      makeDefault.value = !makeDefault.value
    }, i * 1000 / 25)
)
</script>

<template>
  <TresLeches />
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[5, 5, 5]" />
    <CameraControls
      v-bind="controlsState"
      ref="controlsRef"
      :make-default="makeDefault"
      @change="onChange"
      @start="onStart"
      @end="onEnd"
    />
    

That means every time these emits would be expected to fire once, they're fired 100 times:

function addEventListeners() {
  useEventListener(controlsRef.value as any, 'update', () => {
    emit('change', controlsRef.value)
    invalidateOnDemand()
  })
  useEventListener(controlsRef.value as any, 'controlend', () => emit('end', controlsRef.value))
  useEventListener(controlsRef.value as any, 'controlstart', () => emit('start', controlsRef.value))
}

The problem is the anonymous functions:

Note: If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an addEventListener call, the second function will also be added to the list of event listeners for that target.

Indeed, anonymous functions are not identical even if defined using the same unchanging source-code called repeatedly, even if in a loop.

Repeatedly defining the same unnamed function in such cases can be problematic. (See Memory issues, below.)

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
MDN Web Docs
EventTarget: addEventListener() method - Web APIs | MDN
The addEventListener() method of the EventTarget interface
sets up a function that will be called whenever the specified event is delivered to the target.

Reproduction

N/A

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.