React, queries, and field-level reactivity?

[beorn]

I'm trying to do some scaling experiments with the Supabase example, changing containers/app/index.tsx to the below.

Currently the entire query re-runs (and everything re-renders) if I leave out { fieldTracking: true }, and if I turn on fieldTracking the query doesn't re-run (and the items doesn't re-render) even if items are completed. What's the right way to make it render optimized so only one Item is re-rendered if that's the only item that changes?

import { useState } from "react"
import Todos from "../../models/Todos"
import useReactivity from "../../utils/useReactivity"

function App() {
  const [text, setText] = useState("")
  return (
    <>
      <input
        type="text"
        value={text}
        placeholder="Type and press Enter to add a new item …"
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            if (text === "") { // return on empty => insert 1000 sample items
              console.log("add many")
              Todos.insertMany(
                Array(1000)
                  .fill({})
                  .map(() => ({
                    text: `test ${Math.random()}`,
                    completed: false,
                  }))
              )
              return
            }
            Todos.insert({ text, completed: false })
            setText("")
          }
        }}
      />
      <List />
    </>
  )
}

function List() {
  console.warn("--- rendering List")
  const items = useReactivity(
    () => Todos.find({}, { fieldTracking: true }).fetch(),
    []
  )
  return (
    <ul>
      {items.map((item) => (
        <Item key={item.id} item={item} />
      ))}
      {items.length === 0 && <li className="empty">Empty</li>}
    </ul>
  )
}

function Item({ item }: { item: any }) {
  console.log("--- rendering Item", item.id)
  return (
    <li className={item.completed ? "completed" : ""}>
      <input
        type="checkbox"
        checked={item.completed}
        onChange={() =>
          Todos.updateOne(
            { id: item.id },
            { $set: { completed: !item.completed } }
          )
        }
      />
      <p>{item.text}</p>
      <button onClick={() => Todos.removeOne({ id: item.id })}>x</button>
    </li>
  )
}

export default App

[Cmacu]

// Dear react, it's day 13234 and everything re-rendered again. Can we reconsider signals, please? (answer: But, but... I am just a library)

Jokes/frustration aside, I think this is a react state management issue and not sure it can really be resolved without implementing a third party state management.

[beorn]

Okay, answering my own question — by splitting into a 'list' query and a 'details' query, and by using React.memo on the Item (that only gets id as prop), minimal number of re-renders are performed. But of course, this means extra memory use (memo) and extra queries (list/detail split).

If you see a better way, please let me know.

import React, { useState } from "react"
import Todos from "../../models/Todos"
import useReactivity from "../../utils/useReactivity"

export default function App() {
  return (
    <>
      <Input />
      <List />
    </>
  )
}

function List() {
  console.warn("--- rendering List")
  const items = useReactivity(
    () => Todos.find({}, { fields: { id: 1 } }).fetch(),
    []
  )
  return (
    <ul>
      {items.map(({ id }) => (
        <Item key={id} id={id} />
      ))}
      {items.length === 0 && <li className="empty">Empty</li>}
    </ul>
  )
}

const Item = React.memo(function Item({ id }: { id: string }) {
  const item = useReactivity(() => Todos.find({ id }).fetch(), [])[0]
  console.log("--- rendering Item", id, item.text)
  return (
    <li className={item.completed ? "completed" : ""}>
      <input
        type="checkbox"
        checked={item.completed}
        onChange={() =>
          Todos.updateOne(
            { id: item.id },
            { $set: { completed: !item.completed } }
          )
        }
      />
      <p>{item.text}</p>
      <button onClick={() => Todos.removeOne({ id: item.id })}>x</button>
    </li>
  )
})

function Input() {
  const [text, setText] = useState("")
  return (
    <input
      type="text"
      value={text}
      placeholder="Type and press Enter to add a new item …"
      onChange={(e) => setText(e.target.value)}
      onKeyDown={(e) => {
        if (e.key === "Enter") {
          if (text === "") {
            console.log("add many")
            Todos.insertMany(
              Array(1000)
                .fill({})
                .map(() => ({
                  text: `item ${Math.random()}`,
                  completed: false,
                }))
            )
            return
          }
          Todos.insert({ text, completed: false })
          setText("")
        }
      }}
    />
  )
}

[maxnowack]

Field-level tracking only works, if the fields are accessed in a reactive context. For React, this is only inside of the useReactivity callback, not in the render itself.
The pattern you've used is the way I also use with React to get minimal rerenders.