Hey, I seem to have a weird side effect when using...

# javascript

[Hildebrandt Tobias]

Hey, I seem to have a weird side effect when using a callback with useEffect in Props.
Assuming this structure:

external interface InnerProps : Props {
  var onSubmit: () -> Unit
}
val Inner = FC<InnerProps> { props ->
  useEffectOnce {
    val keyHandler = { event: KeyboardEvent ->
        if (event.key == KeyCode.ArrowRight.toString()) {
            props.onSubmit()
        }
    }
    document.addEventListener(
        type = "keyup", 
        callback = keyHandler.unsafeCast<((Event) -> Unit)>(), 
        options = { }
    )
  }
  
  Button {
    onClick = { props.onSubmit() }
  }
}

val Outer = FC<Props> {
  (0..9).forEach {
    Inner {
      onSubmit = { println("TEST") }
    }
  }
}

A Button press only prints the test one time, but the keyboard press 10 (the amount Inner FC due to loop) times.
Edit: I guess this is because the listener is created 10 times by just rendering the Inner FC? I hope I can fix it by adding a active variable.