Ref pattern with jotai works well but...is this a bad idea??

[tomhicks]

I have a UI where you can place items by dragging them around on a canvas. You can zoom in and out on the canvas. I store the current canvas scale in canvasScaleAtom.

The individual items on the canvas can be dragged around like:

function Item({x, y}: {x: number, y: number}) {
  const scale = useAtomValue(canvasScaleAtom)
  const [delta, setDelta] = React.useState<CanvasPosition>({x: 0, y: 0})

  return (
    <motion.div
      onPan={(e, i) => {
        const delta = {x: i.offset.x / scale, y: i.offset.y / scale}
        setDelta(delta)
      }}
      onPanEnd={() => {
        setDelta({x: 0, y: 0})
        persistItem({x: x + delta.x, y: y + delta.y})
      }}
      style={{left: x, top: y, x: delta.x, y: delta.y}}
      ... other bits
    />
}

Doing that means that every item renders on every scale change, even though the scale isn't used in rendering, only in callbacks.

I updated to this...

const scaleRef = {current: 1}
const scaleRefAtom = atom((get) => {
  scaleRef.current = get(canvasScaleAtom)
})

function Item({x, y}: {x: number, y: number}) {
  const scale = useAtomValue(scaleRefAtom).current
  ...everything else the same

...and it doesn't cause a render on all the items. But I'm using global shared state.

I'm basically using the atom as a container to compute the new value (the computation is just "copy") and give me a reference to a global mutable value.

Is there a jotai-preferred way of achieving this so it doesn't cause renders, but does give me the value inside a callback?

[dai-shi]

Side effect in read function is not recommended, just like React render function.
(It may work in Legacy Mode, but in Concurrent Mode, it would behave unexpectedly.)

Having a mutable source in an atom is possible for expert users.

const scaleRefAtom = atom({ current: 1 })

But, the above is not very good as the ref is shared among Providers.

const scaleRefAtom = atom(() => ({ current: 1 }))

This is better, but still not recommended for ordinary users.

---

A jotai-preferred way is to read atom values in write.
If the final destination was an atom, it would be just easy.
If you need to setState from React.useState, it will be tricky.

function Item({x, y}: {x: number, y: number}) {
  // const scale = useAtomValue(canvasScaleAtom)
  const [delta, setDelta] = React.useState<CanvasPosition>({x: 0, y: 0})
  const [, setDeltaWithScale] = useAtom(useMemo(
    () => atom(null, (get, _set, arg) => {
      const scale = get(canvasScaleAtom)
      setDelta({ x: arg.x / scale, y: arg.y / scale })
    }),
    []
  ))
  //...

To ease this pattern, we have useAtomCallback
https://github.com/pmndrs/jotai/blob/2bf5d2f29d19141e426ecd9f9b556d08cef94be7/docs/api/utils.md#useatomcallback
but, it would still be tricky.