WIP - Exploring using search from Rails

[arv]

No description provided.

[render]

Your Render PR Server URL is https://todo-row-versioning-pr-18.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cnsa03md3nmc73d2o1f0.

[aboodman]

A few things:

• Is this a hook? use is typically reserved for hooks.
• I don't think we'll call them tables, probably collections.
• What about query<T>(rep, name)
• Also I think it is fine to wrap this all up into a useQuery react hook and not expose useTable/query at all. I bet it will feel more natural to just repeat shared sections of the query rather than share them. They're so succint already.

[tantaman]

useTable does feel redundant.

[arv]

I initially had a useMemo in there... that is why it was structured like a hook.

[arv]

Also I think it is fine to wrap this all up into a useQuery react hook and not expose useTable/query at all. I bet it will feel more natural to just repeat shared sections of the query rather than share them. They're so succint already.

The query starts with an object... If we want to collapse this into one hook it needs to be something along the lines of:

useQuery<List[]>(rep, 'list', q => q.select('id', 'name').where(...), deps);

This looks fine to me :-)

But we also need to get parse in there...

and when there is join involved we need to register all the key namespaces.

useQuery(rep, {
  list: listSchema.parse,
  todo: todoSchema.parse,
}, q => ..., deps)

[tantaman]

you'll need a way to destroy the statement.

[tantaman]

Setting state via useEffect causes UI flashing / tearing.

useState calls inside useEffect will not run in the same render pass as the render caused by a change in dependencies.

In other words, the component will render and fully paint to the browser once with the updated dependencies and then again with the effects (setValue) of useEffect.

You'd need to emulate useEffect with useState to prevent flashing.

const [prevDependencies, setPrevDependencies] = useState(dependencies);
if (!shallowEqual(dependencies, prevDependencies)) {
  setPrevDependencies(prevDependencies);
  const newView = viewFn();
  setValue(newView.value);
  setView(newView);
  disposer();
  setDisposer(newView.on(setValue));
}

This will ensure that when dependencies change, the new view is created and value set on the component before it renders to the screen.

some related discussion: https://twitter.com/tantaman/status/1732140032729985512

[arv]

You have certainly opened up a can of worms!

The code that you have here and the code on twitter seems incomplete. We need to have a cleanup phase too to remove the listener.

[aboodman]

See also useLayoutEffect ?

[tantaman]

The code that you have here and the code on twitter seems incomplete. We need to have a cleanup phase too to remove the listener.

setDisposer would handle that, although given the disposer isn't used to render anything it should be a ref rather than state.

This should be more complete:

// track previous deps
const [prevDependencies, setPrevDependencies] = useState();
// track our view / query results
const [view, setView] = useState();
// track our subscription to the view
const [disposer, setDisposer] = useState();

// prevDeps === undefined -> first render
// prevDeps != deps, re-render
if (prevDependencies === undefined || !shallowEqual(dependencies, prevDependencies)) {
  setPrevDependencies(prevDependencies);
  // new deps? compute view / query
  const newView = viewFn();
  // destroy old view
  view?.destroy();
  // destroy old subscription
  disposer?.();

  setValue(newView.value);
  setView(newView);
  setDisposer(newView.on(setValue));
}

// also need to try cleaning up on un-mount of the component
useEffect(() => {
  disposer?.();
  view?.destroy();
}, []);

[arv]

Thanks. I will try again to see if I can get something along these lines working.

For replicache-react, useSubscribe was simpler because useSubscribe is always async and we do not have the result immediately.

[tantaman]

see inline comments

[arv]

missing [listID] deps