React.js throttle mousemove event keep throwing event.persist() error

Question

I need to throttle the mousemove event, and I follow the tips below to build the method, but doesn't work: Perform debounce in React.js

Here is my code (http://jsbin.com/binesofepo/edit?js,console,output):

class Tool extends Component {
  constructor(props) {
    super(props);
    this._onMouseMove = _.throttle(this._onMouseMove.bind(this), 1000)
  }

  render() {    
    return (

      <div ref="tool" className="tool">
        <div ref="toolBody"
             className="tool__body"
             onMouseMove={this._onMouseMove}></div>
      </div>
    )
  }
  _onMouseMove(e) {
    e.persist()
    console.log(e.screenX)
  }
}

If you keep mousemove on the tool__body, It'll get lots of below warning:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property screenX on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See fb.me/react-event-pooling for more information.

my react version: "15.0.2"

Seems e.persist() doesn't work well. Any idea? :D

Seems pretty useful error message to me. Did you follow the suggested link https://facebook.github.io/react/docs/events.html#event-pooling? — U r s u s, Jul 01 '16 at 10:27
yeah, so I add `e.persist()` in my `_onMouseMove`, but don't work — twxia, Jul 01 '16 at 10:29

score 25 · Accepted Answer · answered Jul 01 '16 at 17:43

25

e.persist needs to be called synchronously with the event, the handler can be called asynchronously. Here is a fix:

class Tool extends React.Component {
  constructor(props) {
    super(props);
    this._throttledMouseMove = _.throttle(this._throttledMouseMove.bind(this), 2000);
  }

  _throttledMouseMove = (e) => {
    console.log(e.screenX);
  }

  render() {    
    return (
      <div ref="tool" className="tool">
        <div ref="toolBody"
             className="tool__body"
             onMouseMove={this._onMouseMove}>
        </div>
      </div>
    )
  }

  _onMouseMove = (e) => {
    e.persist();
    this._throttledMouseMove(e);

  }
}
ReactDOM.render(<Tool/>, document.querySelector('.main'))

The relevant change is calling _onMouseMove directly from the event, and setting up a second method to actually handle event that's been throttled.

answered Jul 01 '16 at 17:43

Michael Camden

1,183
8
9

Thanks a lot :D , the official document doesn't notice that – twxia Jul 05 '16 at 02:41
Glad I could help. – Michael Camden Jul 05 '16 at 14:35
Nice explanation, I haven't figured that you need to execute the handler first and then pass the same object to the throttled handler, thanks! – pedrommuller Aug 02 '17 at 20:37
Will the event automatically 'unpersist'? Do you have to manually do that or will it die when all the valid pointers to it die? – jscul Mar 16 '18 at 08:43
@JohnCullen I am not certain, but I believe that once all valid pointers to it die the memory for that event obj would be released – Michael Camden Mar 20 '18 at 22:19
@MichaelCamden I’d assume the same. Just wanted to make sure something sneaky wasn’t happening. – jscul Mar 20 '18 at 22:21

Nelu · Answer 2 · 2020-03-04T02:20:40.327

5

With hooks:

const Tool = () => {
  const onMouseMove = useMemo(() => {
    const throttled = _.throttle(e => console.log(e.screenX), 300);
    return e => {
      e.persist();
      return throttled(e);
    };
  }, []);
  return (
    <div className="tool">
      <div className="tool__body" onMouseMove={onMouseMove}>
        Content
      </div>
    </div>
  );
};

edited Mar 04 '20 at 02:20

answered Mar 03 '20 at 18:04

Nelu

16,644
10
80
88

React.js throttle mousemove event keep throwing event.persist() error

2 Answers2

Linked