Prevent reused selections from useShape when using the selector argument

[KyleAMathews]

I spent a while debugging this. Basically the problem is that when I selected some data from a shape in one route of my app e.g. /page/1, the selected data is what my selector saw when I went to /page/2. Since I was filtering the array of rows down to a single row, this broke my selector.

The problem is two-fold.

1. we're using useRef https://github.com/electric-sql/electric-next/blob/340596deba607494251db565be82141a5782ff22/packages/react-hooks/src/react-hooks.tsx#L150 — which caches data across all instances of a hook as I understand it.
2. I'm building my app in Remix which re-uses the same component when switching routes on the same route component — so the same hook instance of useShape is used.

To mitigate, you can for now just clone the object passed to the selector and mutate that. Avoid directly mutating the shape data. In the future we could two things to make this simpler to manage.

1. Don't use useRef.
   Instead use per shape instance cache. I prototyped something like this:

function useCachedValue(initialValue) {
  let cachedValue = initialValue; 

  const getCachedValue = () => {
    console.log(`getCachedValue`, cachedValue)
    return cachedValue;
  }

  const setCachedValue = (newValue) => {
    cachedValue = newValue;
  };

  return [getCachedValue, setCachedValue];
}
var identity = (arg) => arg;
function useShape(_a) {
  var _b = _a, {
    selector = identity
  } = _b, options = __objRest(_b, [
    "selector"
  ]);
  const { getShape: getShape2, getShapeStream: getShapeStream2 } = useShapeContext();
  const shapeStream = getShapeStream2(options);
  const shape = getShape2(shapeStream);
  // const latestShapeData = useRef(parseShapeData(shape));
  const [latestShapeData, setLatestShapeData] = useCachedValue(parseShapeData(shape));
  // const latestShapeData = useMemo(() => parseShapeData(shape), [shape.valueSync.values()]);
  console.log({latestShapeData: latestShapeData()})
  const getSnapshot = React.useCallback(() => latestShapeData(), []);
  const shapeData = useSyncExternalStoreWithSelector(
    useCallback(
      (onStoreChange) => shapeSubscribe(shape, () => {
        setLatestShapeData(parseShapeData(shape));
        onStoreChange();
      }),
      [shape]
    ),
    getSnapshot,
    getSnapshot,
    selector
  );
  return shapeData;
}

Second we could allow a dependencies array which resets the shapeData whenever it changes so e.g. in my case you could call:

useShape(shapeDef, [params.id])