Serious perf / mem leak in useTracker (WithDeps) >= 2.5.0

[yched]

Seen with react-meteor-data >= 2.5.0 (2.4 0 is fine), react 17.x or 18.x : useTracker(fn, deps) updates too frequently, causing performance and memory leaks that accumulate over the component lifetime.

More precisely : when its reactive dependencies change, then the reactive function reruns N times in a row (each causing a component update) with N = 1 + [number of times the useTracker deps have changed since the component was mounted]

Simple reproduction code :

import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { ReactiveVar } from 'meteor/reactive-var';

const myVar = new ReactiveVar('A');

export default function TestComponent() {
  const [dep, setDep] = React.useState(0);
  const changeDep = () => setDep(d => d + 1);

  const value = useTracker(() => {
    console.log('re-run');
    return myVar.get();
  }, [dep]);
  const changeValue = () => myVar.set(value === 'A' ? 'B' : 'A');

  return (
    <div>
      Dependency: {dep}<br/>
      Reactive value: {value}<br/>
      <button onClick={changeDep}>Change dependency</button>&nbsp;
      <button onClick={changeValue}>Change reactive value</button>
    </div>
  );
}

"Reactive value" toggles between 'A' and 'B' on each click on "Change reactive value" button "Dependency" is a counter that increments on each click on "Change dependency"

--> Each click on "Change reactive value" logs the 're-run' message [1 + counter] times

[Grubba27]

As can be seen in the video below, the issue will be solved in v2.6.2

Thanks a lot for your reproduction it was really helpful

Also thanks a lot @radekmie for the call and the useful links

https://user-images.githubusercontent.com/70247653/216424887-d274aace-8059-4ea6-8569-0cc80fa26c51.mov

[yched]

w00t ! Kudos for the super quick fix, glad this could help :-)

[Grubba27]

It was published under the namespace react-meteor-data@2.6.2. If this issue is still not solved, please reopen it.