detach eventListener from react component

Question

I have a react component and I would like to call a function when there is an event encountered (onMouseOver). Is it possible to detach the eventListener from the component after its first occurence? (using states would be a solution but I'm wondering if there is another one)

handleOnMouseOver = () => {
    console.log('event has occured');
}

render() {
   return(
     <div onMouseOver={this.handleOnMouseOver}>
   );
}

Answer 1

you can return a closure, without polluting the state, and keep a flag to disable the listener after the first occurrence.

handleOnMouseOver = () => {
  let isActive = true;
  return (evt) => {
    if(isActive) {
       console.log('event has occured');
       isActive = false; // disable listener
    }
}

render() {
  return(
    <div onMouseOver={this.handleOnMouseOver()}>
  );
}