Research if usage based tracking gives render performance improvements

[avkonst]

Example using https://github.com/dai-shi/react-tracked:

More details here:
https://codesandbox.io/s/react-tracked-example-trb02
and here:
dai-shi/react-tracked#1

/* eslint-env browser */

import React, { useEffect, useRef, StrictMode } from "react";
import ReactDOM from "react-dom";

import { Provider, useTracked } from "react-tracked";
import { useStateLink } from "react-use-state-x";

const initialState = {
  count1: 0,
  deep: {
    count2: 0
  }
};

const useValue = () => {
  const link = useStateLink(initialState);
  const linkRef = useRef(link);
  useEffect(() => {
    linkRef.current = link;
  });
  return [link.value, linkRef];
};

const Counter1 = () => {
  const [value, linkRef] = useTracked();
  const increment = () => {
    linkRef.current.nested.count1.set(c => c + 1);
  };
  return (
    <div>
      <span>Count1: {value.count1}</span>
      <button type="button" onClick={increment}>
        +1
      </button>
      {Math.random()}
    </div>
  );
};

const Counter2 = () => {
  const [value, linkRef] = useTracked();
  const increment = () => {
    linkRef.current.nested.deep.nested.count2.set(c => c + 1);
  };
  return (
    <div>
      <span>Count2: {value.deep.count2}</span>
      <button type="button" onClick={increment}>
        +1
      </button>
      {Math.random()}
    </div>
  );
};

const App = () => (
  <StrictMode>
    <Provider useValue={useValue}>
      <Counter1 />
      <Counter1 />
      <Counter2 />
      <Counter2 />
    </Provider>
  </StrictMode>
);

ReactDOM.unstable_createRoot(document.getElementById("app")).render(<App />);

[avkonst]

It does. See the example: https://hookstate.netlify.com/performance-demo-large-table